From 919cdcc7e1ca643a837300946dcc4deb8c52e9ad Mon Sep 17 00:00:00 2001 From: Eladhal Date: Wed, 21 Mar 2018 12:41:01 +0200 Subject: [PATCH] caesar-enc practice first ver --- .DS_Store | Bin 0 -> 6148 bytes m1.lesson2.caesar-encryption/encryptor.css | 82 ++++++++++++++ m1.lesson2.caesar-encryption/encryptor.html | 18 ++++ m1.lesson2.caesar-encryption/encryptor.js | 112 ++++++++++++++++++++ 4 files changed, 212 insertions(+) create mode 100644 .DS_Store create mode 100644 m1.lesson2.caesar-encryption/encryptor.css create mode 100644 m1.lesson2.caesar-encryption/encryptor.js diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a487e83b5fac5f98a178dadc7e72b0ea0f7fdcd3 GIT binary patch literal 6148 zcmeHK%SuBr5IxZ@3U0b8E?ndXTF@^DrG9}wU>_od>%Gz{#a%w#b23qS@veoInUb8z zWM+~aXmSTYSbT2pfeC;yn=nWj5Sa(3uBx*zlpHTO@YkUQbDxE1?^C>SzjHJ=-Txe~ z*x>^+?6IQOV$G8sw}(x$?z)Bt#@#^R0~2i+pj0b{&ZxDt?D2(nrrU|0(lW)=) za0Z+KXW)Vu&=W=(-xzxD3^)VMz%K*3A0nGDRm_Iv>R?w&0OE+|BGgq&C?-}+6|*5{ zD8WLB78+`a5iFecSp8DPY-r&KWo726EB_QPp{!1OEba)&(0gaV8R#=`ZNrJ)|4061 z28;ZDh>x5BXW+sZ2&3iGa=}B@xAo8Q^wvhUXEuravJ?vS-bVljx<_uyq|Ha^^h*`9 Vp|Z$c!ioMNPzdqP8TbbVz5x+KCQbkV literal 0 HcmV?d00001 diff --git a/m1.lesson2.caesar-encryption/encryptor.css b/m1.lesson2.caesar-encryption/encryptor.css new file mode 100644 index 0000000..a58505f --- /dev/null +++ b/m1.lesson2.caesar-encryption/encryptor.css @@ -0,0 +1,82 @@ +html,body{ + width: 100%; + height: 100%; + font-size: 15px; +} +button{ + font-size: 15px; + width: 100%; +} +button:focus { + outline:0; +} +.Container{ + margin: 50px auto; + width: 40%; + height: 50%; + display: flex; + flex-wrap: wrap; +} +.Nav{ + height: 20%; + width:50%; +} +#btnNavEncr,#btnNavDecr{ + height: 100%; +} +#encrypt,#decrypt{ + width:100%; + height: 100%; + flex-direction: column; + background: wheat; +} +.row{ + height: 25%; + width: 100%; + display: flex; +} +.element{ + margin-top:10%; + margin-left:10%; +} +#codeKeyEnc,#codeKeyDec{ + width: 50%; + height: 28%; + margin-top:8%; + margin-left:3%; +} +label{ + margin-right: 12px; +} +input[type="number"]{ + width: 30%; + margin-bottom: 15px; +} +.btnCode{ + width: 50%; + height: 40%; + background: rgb(72, 125, 134); + border-radius: 5px; +} +input[type="text"]{ + width: 50%; + height: 30%; +} +p{ + width: 50%; + height: 37%; + margin-top: 25px; + background: white; + vertical-align: middle; +} +.visiblity { + display: none; +} +.selected{ + background: gray; +} +.displayFlex{ + display: flex; +} + + diff --git a/m1.lesson2.caesar-encryption/encryptor.html b/m1.lesson2.caesar-encryption/encryptor.html index 7800397..baa2138 100644 --- a/m1.lesson2.caesar-encryption/encryptor.html +++ b/m1.lesson2.caesar-encryption/encryptor.html @@ -3,7 +3,25 @@ Caesar encryption + +
+
+
+
+
+
+
+

+
+
+
+
+
+

+
+
+ \ No newline at end of file diff --git a/m1.lesson2.caesar-encryption/encryptor.js b/m1.lesson2.caesar-encryption/encryptor.js new file mode 100644 index 0000000..507926b --- /dev/null +++ b/m1.lesson2.caesar-encryption/encryptor.js @@ -0,0 +1,112 @@ +let btnPressed; + +const btnTabEncrypt = document.querySelector("#btnNavEncr"); +const btnTabDecrypt = document.querySelector("#btnNavDecr"); +const frmEncrypt = document.querySelector("#encrypt"); +const frmDecrypt = document.querySelector("#decrypt"); +const btnEncrypt = document.querySelector("#encrypt .btnCode"); +const btnDecrypt = document.querySelector("#decrypt .btnCode"); + +btnTabEncrypt.addEventListener("click",btnTabEncryptClick); +btnTabDecrypt.addEventListener("click",btnTabDecryptClick); +btnEncrypt.addEventListener("click",btnEncryptClick); +btnDecrypt.addEventListener("click",btnDecryptClick); + +function Init(){ + btnTabEncrypt.classList.add('selected'); + btnPressed ="Encrypt"; + frmEncrypt.classList.add('displayFlex'); + frmDecrypt.classList.remove('displayFlex'); + frmDecrypt.classList.add('visiblity'); +} + +function btnTabEncryptClick(){ + if (btnPressed ==="Encrypt"){ + return; + } + btnTabEncrypt.classList.toggle('selected'); + btnTabDecrypt.classList.toggle('selected'); + frmEncrypt.classList.toggle('visiblity'); + frmDecrypt.classList.toggle('visiblity'); + frmEncrypt.classList.toggle('displayFlex'); + frmDecrypt.classList.toggle('displayFlex'); + btnPressed ="Encrypt"; +} + +function btnTabDecryptClick(){ + if (btnPressed ==="Decrypt"){ + return; + } + btnTabDecrypt.classList.toggle('selected'); + btnTabEncrypt.classList.toggle('selected'); + frmEncrypt.classList.toggle('visiblity'); + frmDecrypt.classList.toggle('visiblity'); + frmEncrypt.classList.toggle('displayFlex'); + frmDecrypt.classList.toggle('displayFlex'); + btnPressed ="Decrypt"; +} +function convertTextToCode(key,text){ + let code=""; + for (let i=0;i