sonalichawla16 · srishtisharma12 · Apr 14, 2021 · Apr 14, 2021 · Apr 17, 2021 · Apr 19, 2021
diff --git a/Calculator b/Calculator
diff --git a/assign2/index.html b/assign2/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tic tac toe game</title>
+    <link rel= "stylesheet" href="style.css">
+</head>
+<body>
+
+
+    <div class="container" id="main">
+        <span id="turn">Play</span>
+        <!-- show X or O on div click -->
+        <div class="box" id="box1"></div>
+        <div class="box" id="box2"></div>
+        <div class="box" id="box3"></div>
+        <div class="box" id="box4"></div>
+        <div class="box" id="box5"></div>
+        <div class="box" id="box6"></div>
+        <div class="box" id="box7"></div>
+        <div class="box" id="box8"></div>
+        <div class="box" id="box9"></div>
+    </div>
+    <!-- Play Again And Reset All Info -->
+    <button onclick="replay()">Play Again</button>
+
+<script src="script.js"></script>   
+</body>
+</html>
diff --git a/assign2/istockphoto-1061119906-612x612.jpg b/assign2/istockphoto-1061119906-612x612.jpg
diff --git a/assign2/script.js b/assign2/script.js
@@ -0,0 +1,90 @@
+
+
+            var turn = document.getElementById("turn"),
+            // boxes => all boxes
+           // X_or_O => to set X or O into the box
+               boxes = document.querySelectorAll("#main div"), X_or_O = 0;
+
+           function selectWinnerBoxes(b1,b2,b3){
+               b1.classList.add("win");
+               b2.classList.add("win");
+               b3.classList.add("win");
+               turn.innerHTML = b1.innerHTML + " Won the game";
+               turn.style.fontSize = "40px";
+           }
+
+           function getWinner(){
+
+               var box1 = document.getElementById("box1"),
+                   box2 = document.getElementById("box2"),
+                   box3 = document.getElementById("box3"),
+                   box4 = document.getElementById("box4"),
+                   box5 = document.getElementById("box5"),
+                   box6 = document.getElementById("box6"),
+                   box7 = document.getElementById("box7"),
+                   box8 = document.getElementById("box8"),
+                   box9 = document.getElementById("box9");
+
+           // get all posibilites
+             if(box1.innerHTML !== "" && box1.innerHTML === box2.innerHTML && box1.innerHTML === box3.innerHTML)
+                selectWinnerBoxes(box1,box2,box3);
+
+             if(box4.innerHTML !== "" && box4.innerHTML === box5.innerHTML && box4.innerHTML === box6.innerHTML)
+                selectWinnerBoxes(box4,box5,box6);
+
+             if(box7.innerHTML !== "" && box7.innerHTML === box8.innerHTML && box7.innerHTML === box9.innerHTML)
+                selectWinnerBoxes(box7,box8,box9);
+
+             if(box1.innerHTML !== "" && box1.innerHTML === box4.innerHTML && box1.innerHTML === box7.innerHTML)
+                selectWinnerBoxes(box1,box4,box7);
+
+             if(box2.innerHTML !== "" && box2.innerHTML === box5.innerHTML && box2.innerHTML === box8.innerHTML)
+                selectWinnerBoxes(box2,box5,box8);
+
+             if(box3.innerHTML !== "" && box3.innerHTML === box6.innerHTML && box3.innerHTML === box9.innerHTML)
+                selectWinnerBoxes(box3,box6,box9);
+
+             if(box1.innerHTML !== "" && box1.innerHTML === box5.innerHTML && box1.innerHTML === box9.innerHTML)
+                selectWinnerBoxes(box1,box5,box9);
+
+             if(box3.innerHTML !== "" && box3.innerHTML === box5.innerHTML && box3.innerHTML === box7.innerHTML)
+                selectWinnerBoxes(box3,box5,box7);
+
+           }
+
+
+           // set event onclick
+           for(var i = 0; i < boxes.length; i++){
+               boxes[i].onclick = function(){
+                   // not allow to change the value of the box
+                   if(this.innerHTML !== "X" && this.innerHTML !== "O"){
+                   if(X_or_O%2 === 0){
+                      console.log(X_or_O);
+                      this.innerHTML = "X"; 
+                      turn.innerHTML = "O Turn Now";
+                      getWinner();
+                      X_or_O += 1;
+
+                   }else{
+                       console.log(X_or_O);
+                      this.innerHTML = "O";
+                      turn.innerHTML = "X Turn Now";
+                      getWinner();
+                      X_or_O += 1;  
+                   }
+               }
+
+               };
+           }
+
+           function replay(){
+
+               for(var i = 0; i < boxes.length; i++){
+                   boxes[i].classList.remove("win");
+                   boxes[i].innerHTML = "";
+                   turn.innerHTML = "Play";
+                   turn.style.fontSize = "25px";
+
+               }
+
+           }
diff --git a/assign2/style.css b/assign2/style.css
@@ -0,0 +1,50 @@
+body{
+    background-color: white;
+    background-image: url(./istockphoto-1061119906-612x612.jpg);
+}
+
+            *{box-sizing: border-box}
+
+            .container{width: 300px;
+                       overflow: hidden;
+                       margin: 50px auto 0 auto;
+                       color: thistle;
+                     }
+
+            .container span{width: 100%;
+                            display: block;
+                            text-align: center;
+                            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+                            color: #fff;
+                            font-size: 25px;
+                            background: #446CB3;
+                           }
+
+            .container .box{float: left;
+                            width: 100px;
+                            height: 100px;
+                            border: 1px solid rgb(226, 217, 217);
+                            transition: all .25s ease-in-out;
+                            font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; 
+                            font-size: 85px;
+                            text-align: center;
+                            line-height: 100px; 
+                            cursor: pointer;
+                          }
+
+            .container .box:hover{background: lightskyblue;
+                                  color: #fff
+                                 }
+
+            button{background: #c22b26;
+                   color: #fff;
+                   font-weight: bold;
+                   border: 1px solid yellow;
+                    cursor: pointer; 
+                    width: 200px;
+                    height: 40px; 
+                    font-size: 22px;
+                    display: block;
+                    margin: 10px auto}
+
+            .win{background: #0bec31; color: #fff}
diff --git a/html/annie-spratt-0ZPSX_mQ3xI-unsplash.jpg b/html/annie-spratt-0ZPSX_mQ3xI-unsplash.jpg
diff --git a/html/assets b/html/assets
diff --git a/html/index.html b/html/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en">
+<title>My Portfolio</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
+<link rel="stylesheet" href="style.css">
+
+<body>
+
+<!-- Navbar -->
+<div class="w3-top">
+  <div class="w3-bar w3-red w3-card w3-left-align w3-large">
+    <a class="w3-bar-item w3-button w3-hide-medium w3-hide-large w3-right w3-padding-large w3-hover-white w3-large w3-red" href="javascript:void(0);" onclick="myFunction()" title="Toggle Navigation Menu"><i class="fa fa-bars"></i></a>
+    <a href="#" class="w3-bar-item w3-button w3-padding-large w3-white">Home</a>
+    <a href="#about" class="w3-bar-item w3-button w3-padding-large">About Me</a>
+    <a href="#education" class="w3-bar-item w3-button w3-padding-large">Education</a>
+    <a href="#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a>
+  </div>
+
+  <!-- Navbar on small screens -->
+  <div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium w3-large">
+    <a href="#about" class="w3-bar-item w3-button w3-padding-large">About Me</a>
+    <a href="#education" class="w3-bar-item w3-button w3-padding-large">Education</a>
+    <a href="#contact" class="w3-bar-item w3-button w3-padding-large">Contact</a>
+  </div>
+</div>
+
+<!-- Header -->
+<header class="w3-container w3-red w3-center" style="padding:128px 16px ")>
+
+  <h1 class="w3-margin w3-jumbo">Srishti Sharma</h1>
+  <p class="w3-xlarge">Intern at Cyber Group India Pvt. Ltd.</p>
+</header>
+
+<!-- First Grid -->
+<div class="w3-row-padding w3-padding-64 w3-container" id="about">
+  <div class="w3-content">
+    <div class="w3-twothird">
+      <h1>About Me</h1>
+      <div>
+      <p class="w3-text-grey"><pre>
+        To excel in the industry by utilizing 
+        my capabilities, 
+        taking up assignments to enhance 
+        people skills at workplace.
+
+        Motivated, well-disciplined individual
+        Team player
+        Collaborator & Adapter
+
+        Currently  I am pursuing my B.Tech (2017-21) in 
+        Electronics and Communication.</pre></p>
+      </div> 
+    </div>
+
+    <div class="w3-third w3-center">
+      <i class="fa fa-anchor w3-padding-64 w3-text-red"></i>
+    </div>
+  </div>
+</div>
+
+<!-- Second Grid -->
+<div class="w3-row-padding w3-light-grey w3-padding-64 w3-container" id="education">
+  <div class="w3-content">
+    <div class="w3-third w3-center">
+      <i class="fa fa-coffee w3-padding-64 w3-text-red w3-margin-right"></i>
+    </div>
+
+    <div class="w3-twothird">
+      <h1>Education</h1>
+    <div> 
+    <ul>
+    <pre>
+      <li>Since 2017  B.Tech in 
+        Electronics and Communication Engineering 
+        at Delhi Technical Campus, 
+        Greater Noida GGSIPU Aggregate: 76.5 % 
+        (till 6th semester) </li>
+      <li> Year of passing out- 2017  
+        Secured Senior Secondary School Certificate 
+        at Sacred Heart Senior Secondary School, 
+        Chandigarh  Aggregate: 79% </li> 
+      <li>Year of passing out- 2015 
+        Secured Matriculation Certificate 
+        at Sacred Heart Senior Secondary School, 
+        Chandigarh Aggregate: 8.4 CGPA </li>
+    </pre>
+    </ul>
+    </div> 
+    </div>
+  </div>
+</div>
+
+
+<!-- Footer -->
+<footer class="w3-container w3-padding-64 w3-center w3-opacity" id="contact">  
+
+  <div class="w3-xlarge w3-padding-32">
+  <div>
+  <pre>
+    Address- 1146F, Gaur Cascades, Rajnagar Extension, Ghaziabad 
+    E-Mail ID- sharmasrishti121098@gmail.com     
+    Mobile- +91-9041077203 
+  </pre>
+  </div>
+    <i class="fa fa-instagram w3-hover-opacity"></i>
+    <i class="fa fa-github w3-hover-opacity"></i>
+
+
+    <i class="fa fa-linkedin w3-hover-opacity"></i>
+  </div>
+</footer>
+
+
+
+</body>
+</html>
diff --git a/html/style.css b/html/style.css
@@ -0,0 +1,16 @@
+body,h1,h2,h3,h4,h5,h6 {font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; }
+.w3-bar,h1,button {font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}
+.fa-anchor,.fa-coffee {font-size:200px}
+header {
+    background-image: url("./annie-spratt-0ZPSX_mQ3xI-unsplash.jpg");
+    background-size: cover;
+    height: 50%;
+    text-align: center;
+    color:white;
+}
+h1{
+    color: orangered;
+}
+p{
+   color: black;
+}