kaz_progの日記

日記や勉強した内容。

今日の勉強内容!

テックエキスパート22日目!

 

今日の勉強内容は

✅フロント実装

 ✅Haml .  scss  です!

 

本当にフロント実装でめちゃくちゃ苦労してます笑

 

スケジュール早めに進んでたのにこれで時間かかりすぎて元どおり笑

 

ようやく形は完成してリファクタリングに入るところですが

SCSSをBEMに則って入れ子してくのところでうまくできてなかったりして

レイアウトが崩れたりで大変・・・。

 

とりあえず今日は

%label{class: "image_choice"}
= icon('fas', 'image')
%input{type: "file"}

 

このlabelを使ってfileを選択できるようにするってのが学習できただけでも成長!

 

こいつのSCSSに

.image_choice{
input{
display: none;
}
}

これを指定する事で、

「ファイルが選択されていません」の文字が消えた時は興奮しました笑

 

調べて正解にたどり着けると気持ち良いですよね!

 

因みに自分のメモ用に説明すると

hamlのclassで指定している"image_choise"がクラス名

 

それでなぜ文字を隠せるかというとSCSSの画面にもある通り

.image_choiceでscssを当てた後に

input{ }でinputだけを指定する事でinputにのみdisplay:none;が適用され

アイコンは消えずアイコンをクリックする事でファイル選択ができるようになった。

 

で。いいのかな?分かりません笑

色々調べて触っていたらできたので本質をあまり理解していませんが自分は

こうなのかなって勝手に思ってるだけですが笑

 

でも調べてここかな?⇨実行⇨失敗⇨戻す⇨調べる⇨実行・・・・・・・

の流れでトライアンドエラーをする事で色々理解はできますね。

 

本当にエンジニアは調べる能力が凄い重要なんだなって応用カリキュラムに

入ったら実感しました。

 

最初に比べてプログラミングの話をチーム内やメンターの方とまともに会話できるようになってきて少しずつでも知識が入ってるんだなって思います。

 

楽しいから頑張れるし、仲間がいるから頑張れる!

 

因みに寿司打もう少しで13000円行けそうでいけない・・・。

アベレージが12000円くらいになってきてテンションぶち上げマックス。

 

 

以上