Codepen and html5 and javascript

https://codepen.io/jamad/pen/MWRgvqZ をここに表示してみる　

• expected result
• css は <style>(body部分は全体に影響するので外した) , javascript は<script> に入れるように記述した。 ```html で　コード全体をマークしたら、ソースコード表示になってしまったので、外した。コードここから と コードここまで で可視化してみた。

コードここから

コードここまで

my works

• https://codepen.io/your-work/（Github でログイン）
• 文字列内の全ての{}を()に置き換え

font awesome

• clicking the icon can copy it into the clipboard
• 

maze 2024-01-05

• https://jamad.github.io/codepen_porting/maze
• by maze.md

• 

image adjuster

• https://jamad.github.io/mytools/image_adjuster
• 
• 研究過程　https://codepen.io/jamad/pen/RwdPbmw

image filter

• https://codepen.io/jamad/pen/ExMadmE
• 

2024-01-04 https://codepen.io/jamad/pen/ZEPQrrQ

---

practice

• 001 https://codepen.io/jamad/pen/yLwBzrQ

---

簡易メモ (Local storage を使ったメモ)

• 試作（完了）
• textarea に文字を入力してSaveするとmemoをkeyとしたlocalstrageというDictにValueが保存される
• clear ボタンは　textareaの中を消去するだけ
• loadボタンは　DictのValueをtextareaに表示する

---

保存されたデータ

---

2023-12-24 日時表示

• https://codepen.io/jamad/pen/yLwyMEe

現在の日時を表示

• 
• https://codepen.io/jamad/pen/XWGJWro

  <span id="datetime"></span>
  <script>
  dateOptions=Object.fromEntries(['year','month','day','hour','minute','second'].map(key=>[key,'numeric']));
  getdate=(today = new Date())=>today.toLocaleDateString('en-US', dateOptions);
  const updateDateTime = () => document.getElementById('datetime').innerHTML =`${getdate()}`;
  updateDateTime();
  setInterval(updateDateTime, 1000);
  </script>
  

現在の時刻を表示

• 
• https://codepen.io/jamad/pen/JjzoPGB

現在の時間
<p id="time"></p>
<script>
getTime=(now=new Date())=>`${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
updateTime=()=> document.getElementById('time').textContent=getTime();
updateTime();
setInterval(updateTime, 1000);
</script> 

現在の日付を表示

• 
• https://codepen.io/jamad/pen/eYXmOYE

<span id="date"></span>
<script>
today= new Date();
options={year:'numeric', month:'numeric',day: 'numeric' };
document.getElementById("date").innerHTML = today.toLocaleDateString('en-US', options);
</script>

• need to learn more about this
• https://talk.jekyllrb.com/t/how-do-i-embed-javascript-in-jekyll/4374/29

<span id="date"></span>
<script>
  window.onload = function() {
    var today = new Date();
    var options = { year: 'numeric', month: 'numeric', day: 'numeric' };
    document.getElementById("date").innerHTML = today.toLocaleDateString('en-US', options);
  }
</script> 

.mdファイルでJavaScript実行できるのか！

コードの実験をした場所　

• ver2 https://codepen.io/jamad/pen/ExMaxWq
• ver1 https://codepen.io/jamad/pen/ExMaxPz