diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..a487e83
Binary files /dev/null and b/.DS_Store differ
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 @@
 <head>
     <meta charset="UTF-8">
     <title>Caesar encryption</title>
+    <link rel="stylesheet" href="encryptor.css">
 </head>
 <body>
+    <div class = "Container">
+        <div class = "Nav" ><button id ="btnNavEncr">encryption</button></div>
+        <div class = "Nav" ><button id ="btnNavDecr">decryption</button></div>
+        <div id ="encrypt">
+            <div class ="row"><label class = "element">Key:</label> <input id ="codeKeyEnc" type="number" min="0"></div>
+            <div class ="row"><input placeholder = "Enter code" class ="element" id= "inpTextEnc" type="text"></div>
+            <div class ="row"><button class = "element btnCode">Encrypt</button></div>
+            <div class ="row"><label class = "element">Output:</label><p id = "pOutputEnc"></p></div>
+        </div>
+        <div id ="decrypt">
+            <div class ="row"><label class = "element">Key:</label> <input id ="codeKeyDec" type="number" min="0"></div>
+            <div class ="row"><input placeholder = "Enter code" class ="element" id= "inpTextDec" type="text"></div>
+            <div class ="row"><button class = "element btnCode">Decrypt</button></div>
+            <div class ="row"><label class = "element">Output:</label><p id = "pOutputDec"></p></div>
+        </div>
+    </div>
+    <script type="text/javascript" src="encryptor.js"></script>
 </body>
 </html>
\ 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<text.length;i++){
+        let num = text.charCodeAt(i)+key;
+        let char = String.fromCharCode(num);
+        code +=char;
+    }
+    return code;
+}
+
+function btnEncryptClick(){
+    if (Vaild("Encrypt")){
+        const key = Number(document.querySelector('input[type=number]#codeKeyEnc').value); 
+        const text = document.querySelector('input[type=text]#inpTextEnc').value; 
+        document.querySelector('#pOutputEnc').textContent = convertTextToCode(key,text);
+    }
+}
+
+function btnDecryptClick(){
+    if (Vaild("Decrypt")){
+        const key = Number(document.querySelector('input[type=number]#codeKeyDec').value) * -1; 
+        const text = document.querySelector('input[type=text]#inpTextDec').value; 
+        document.querySelector('#pOutputDec').textContent = convertTextToCode(key,text);
+    }
+}
+
+function Vaild(type){
+    if (keyTextEmpty(type)){
+        alert ("Key field is empty")
+        return false;
+     }
+    if (codeTextEmpty(type)){
+      alert ("Code field is empty")
+      return false;
+      }   
+      
+      return true;
+}
+function keyTextEmpty(type){
+    if (type === "Encrypt")
+    {        
+        const keyText = document.querySelector('input[type=number]#codeKeyEnc').value;  
+        return keyText === ""; 
+    }
+    else{
+        const keyText = document.querySelector('input[type=number]#codeKeyDec').value;
+        return keyText === ""; 
+    }
+}
+
+function codeTextEmpty(type){
+    if (type === "Encrypt")
+    {        
+        const codeText = document.querySelector('input[type=text]#inpTextEnc').value;  
+        return codeText === ""; 
+    }
+    else{
+        const codeText = document.querySelector('input[type=text]#inpTextDec').value;
+        return codeText === ""; 
+    }
+
+
+}
+
+Init();
\ No newline at end of file
