Merge pull request #3 from pesto-students/week_2

Week 2 Got the approval
pesto-students · Aug 9, 2022 · d0321c0 · d0321c0
2 parents 0f4dad8 + 41b29ae
commit d0321c0
Show file tree

Hide file tree

Showing 11 changed files with 352 additions and 1 deletion.
diff --git a/Week-2/README.md b/Week-2/README.md
@@ -0,0 +1,4 @@
+# Week-2 Assignment
+---
+## Exercise2.1: (2-3 hrs)
+## Exercise2.2: (2-3 hrs)
diff --git a/Week-2/Week-2 b/Week-2/Week-2
diff --git a/Week-2/exercise_2.1/README.md b/Week-2/exercise_2.1/README.md
@@ -0,0 +1,24 @@
+# Week-2 Assignment
+---
+### Exercise2.1: (2-3hours)
+Create a new webpage on a subject that you're interested in. The page should **NOT** use anyframework like Bootstrap and it should include the following elements:-
+- The `.html` page and a linked `.css` file applies a consistent color scheme to links and text onyour page.
+- A page header with a title and description for the site.
+- An articles section with three articles, each including a title, summary and a link. 
+- A page footer containing info about you or the site.- Proper use of the semantic HTML tags we discussed.
+- Use this website [Lorem Ipsum](http://www.lipsum.com/) to generate random blocks ofcontent to fill your website.
+- **Commit often (with good meaningful commit messages), and Push to Github regularly.**
+-  Add a form to your site. This form can contain as many fields as you wish to have but makesure it follows proper use of the semantic HTML tags we discussed.  Add validation to thesefields without using any framework or JavaScript.
+- On a larger device we should see a 2 column layout. On a smaller device the right sidecontent should stack below the image.  Add at least three more articles and then convert themto a grid, so that you show 3 articles per row in a box layout.
+- Color the form button with any color of your choice. Using CSS, in :hover state changes thecolor. Again the color is of your choice.
+- Use the sketch below to guide you towards the layout and content you are trying to achieve.*Please note that this is just a sketch - you can choose the colors, fonts, images, input fields,validation messages etc. that you want to use in the page.
+
+### Guidelines:1.
+1. There should be a separate branch created in GitHub for his exercise.
+2. The UI is not subjected to look like the below. Please add your desired “look and feel” to thelayout and forms. Make sure Design looks good.
+3. Semantic tags should be used for laying out the UI.
+4. The Form validation is client-side validation. The validation messages could be subjective.
+5. There should be one or more Git commits with meaningful commit messages.
+---
+### The finale output 0f the exercise
+![](exercise_2.1.png)
diff --git a/Week-2/exercise_2.1/exercise_2.1.png b/Week-2/exercise_2.1/exercise_2.1.png
diff --git a/Week-2/exercise_2.1/ext.js b/Week-2/exercise_2.1/ext.js
@@ -0,0 +1,15 @@
+const onChangeHandler = (e) => {
+  const errorLog ={ }
+
+  const {value, title,name} = e.targe
+  console.log("e",e)
+  if(name === 'connName'){
+    setInputForm({name: value})
+  }
+}
+
+const [inputForm,setInputForm] = useState({
+  name:'',
+  description:'',
+})
+
diff --git a/Week-2/exercise_2.1/index.html b/Week-2/exercise_2.1/index.html
@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=q, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>For the Article </title>
+</head>
+
+<body>
+  <header class="header-about">
+    <h2>Lorem ipsum dolor sit.</h2>
+    <h4>Lorem ipsum dolor sit amet consectetur.</h4>
+  </header>
+  <main>
+    <section class="articles">
+      <div class="container-1">
+        <article class="box-1 inner-container">
+          <h4>Lorem ipsum dolor sit.</h4>
+          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Corporis molestias numquam alias, labore ipsam
+            quaerat, harum ex cupiditate eos facilis expedita voluptatum aliquam voluptate enim optio sit! Nemo aliquid
+            cumque deserunt recusandae facilis nulla voluptas repellat libero, sint ut. Molestiae ducimus reprehenderit
+            molestias quia doloremque.</p>
+        </article>
+        <article class="box-2 inner-container">
+          <h4>Lorem ipsum dolor sit.</h4>
+          <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tenetur nisi ex harum dolore obcaecati distinctio
+            consequatur reprehenderit sequi labore, excepturi accusantium voluptatem id totam alias iste neque natus,
+            sapiente at impedit, magnam ullam aut quaerat placeat eveniet. Reprehenderit quas ea sit ipsum eaque libero
+            dolore!</p>
+        </article>
+      </div>
+      <div class="container-1">
+        <article class="box-3 inner-container">
+          <img src="https://picsum.photos/id/1/800/450" alt="a_random_image" class="image-container">
+        </article>
+        <div class="container">
+          <article class="inner-container">
+            <h4>Lorem ipsum dolor sit.</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi,
+              excepturi
+              maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia
+              voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit.
+              Beatae, aliquid ipsam.</p>
+          </article>
+          <article class="inner-container">
+            <h4>Lorem ipsum dolor sit.</h4>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi,
+              excepturi
+              maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia
+              voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit.
+              Beatae, aliquid ipsam. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia fugiat accusamus
+              architecto? Est architecto sint aliquam possimus atque harum iusto molestias dolorem aspernatur, autem
+              sapiente, magni, quia nulla sit. Ad eaque, repellendus, aspernatur nobis cum ipsa veniam labore, quo optio
+              accusantium fugit at perferendis aperiam?</p>
+          </article>
+        </div>
+      </div>
+      <article class="box-4 inner-container">
+        <h4>Lorem ipsum dolor sit.</h4>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam obcaecati numquam, ea eligendi,
+          excepturi
+          maiores facilis, laudantium tempore perferendis tenetur quia nemo? Adipisci, eos, vitae suscipit mollitia
+          voluptatibus repudiandae, soluta nemo dolorem quidem molestias sint quas esse? Illum odit quod ab impedit.
+          Beatae, aliquid ipsam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure voluptatem est beatae
+          dolore nam perspiciatis veniam provident doloribus quo! Pariatur atque magni in impedit dolorem obcaecati est
+          laboriosam facere doloremque delectus unde autem similique, ipsum officia, sed temporibus repellat illo
+          necessitatibus amet, placeat vitae nemo?</p>
+      </article>
+    </section>
+    <section class="form-container">
+      <form class="form-controller">
+        <fieldset class="title-container">
+          <legend>
+            <h5 class="form-label">
+              Sign up Form / Subscription
+            </h5>
+          </legend>
+          <fieldset id="TitleCheckbox">
+            <legend>Title</legend>
+            <label for="Mx" class="checkobx-label">Mx</label>
+            <input type="checkbox" name="Mx" class="checkbox-controller" id="Mx">
+            <label for="Mr" class="checkobx-label">Mr</label>
+            <input type="checkbox" name="Mr" class="checkbox-controller" id="Mr">
+            <label for="Mrs" class="checkobx-label">Mrs</label>
+            <input type="checkbox" name="Mrs" class="checkbox-controller" id="Mrs">
+            <label for="Miss" class="checkobx-label">Miss</label>
+            <input type="checkbox" name="Miss" class="checkbox-controller" id="Miss">
+          </fieldset>
+          <fieldset class="personal-details">
+            <legend>Personal Details</legend>
+            <label for="Fname" class="input-label"> First Name</label>
+            <input type="text" name="fname" id="Fname" class="input-controller">
+            <br>
+            <label for="Lname" class="input-label">Last Name</label>
+            <input type="text" name="lname" id="Lname" class="input-controller">
+            <br>
+            <label for="Email" class="input-label">Email</label>
+            <input type="email" name="email" id="Email" class="input-controller">
+            <br>
+            <label for="PhoneNum" class="input-label">Phone Number</label>
+            <input type="number" name="phoneNumber" id="PhoneNum" class="input-controller">
+            <br>
+            <label for="Password" class="input-label">Password</label>
+            <input type="password" name="password" id="Password" class="input-controller">
+            <br>
+            <label for="ConfirmPass" class="input-label">Confirm Password</label>
+            <input type="password" name="confirmPass" id="ConfirmPass" class="input-controller">
+            <br>
+            <label for="Country" class="input-label">Country</label>
+            <select name="country" id="Country" class="input-controller selector">
+              <option id="canada" value="canada">Canada</option>
+              <option id="india" value="india">India</option>
+              <option id="USA" value="USA">USA</option>
+              <option id="china" value="china">China</option>
+            </select>
+            <br>
+            <button type="submit" value="submit">Submit</button>
+          </fieldset>
+        </fieldset>
+      </form>
+    </section>
+  </main>
+  <footer class="footer-controller">
+    <h5>Act Fast! </h5>
+  </footer>
+</body>
+
+</html>
diff --git a/Week-2/exercise_2.1/style.css b/Week-2/exercise_2.1/style.css
@@ -0,0 +1,69 @@
+* {
+  font-family: sans-serif;
+  margin: 2px;
+  padding: 2px;
+}
+
+body {
+  height: 100vh;
+  width: calc(100vw - 22px);
+}
+
+.header-about {
+  text-align: center;
+}
+
+.articles {
+  display: block;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+article {
+  padding: 1em;
+}
+
+.container-1 {
+  display: flex;
+  flex-direction: initial;
+}
+
+.inner-container {
+  display: block;
+  text-align: left;
+}
+
+.form-container {
+  width: 28rem;
+  display: flex;
+  justify-content: end;
+  justify-self: center;
+}
+
+.form-controller {
+  display: flex;
+  justify-items: start;
+}
+
+.title-container {
+  display: block;
+  font-weight: bold;
+}
+
+label input {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+button {
+  font-weight: bold;
+  width: 10rem;
+  margin: auto;
+}
+
+.footer-controller {
+  text-align: center;
+}
diff --git a/Week-2/exercise_2.2/README.md b/Week-2/exercise_2.2/README.md
@@ -0,0 +1,16 @@
+# Exercise2.2:(2-3hours)
+---
+
+## Exercise2.1-GoogleDocs(Image)Exercise:- 
+
+ Create a new `.html` page and link a `.css` file to it.- Using CSS only, achieve the above animation.-  No frameworks or libraries to be used.
+ - **Commit often (with good meaningful commit messages), and Push to Github regularly.
+
+ ### **Guidelines:
+ 1. There should be a separate branch created in GitHub for this exercise.
+ 2. The UI should closely match with the screengrab given as sample. Layout, forms, validationetc.
+ 3. 3rd party CSS libraries should not have been used.
+ 4. There should be one or more Git commits with meaningful commit messages.
+
+### final output 
+![](exercise_2.2.png)
diff --git a/Week-2/exercise_2.2/exercise_2.2.png b/Week-2/exercise_2.2/exercise_2.2.png
diff --git a/Week-2/exercise_2.2/index.html b/Week-2/exercise_2.2/index.html
@@ -0,0 +1,23 @@
+<!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>Advance CSS</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <main>
+    <h3 class="central-text">Hi!</h3>
+    <div class="one"></div>
+    <div class="two"></div>
+    <div class="three"></div>
+    <div class="four"></div>
+  </main>
+
+</body>
+
+</html>
diff --git a/Week-2/exercise_2.2/style.css b/Week-2/exercise_2.2/style.css
@@ -0,0 +1,70 @@
+* {
+  font-family: sans-serif;
+  margin: 2px;
+  padding: 2px;
+}
+
+body {
+  height: 100vh;
+  width: calc(100vw - 22px);
+}
+
+main {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  width: 200px;
+  height: 200px;
+  margin: auto;
+  padding-top: 200px;
+}
+
+.one {
+  grid-column: 1;
+  grid-row: 1;
+  background-color: red;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: top left;
+}
+
+.two {
+  grid-column: 2;
+  grid-row: 1;
+  background-color: yellow;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: top right;
+}
+
+.three {
+  grid-column: 1;
+  grid-row: 2;
+  background-color: blue;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: bottom left;
+}
+
+.four {
+  grid-column: 2;
+  grid-row: 2;
+  background-color: green;
+  animation: spin 5s infinite;
+  animation-direction: alternate;
+  transform-origin: bottom right;
+}
+
+.central-text {
+  text-align: center;
+  width: 210px;
+  margin-top: 80px;
+  font-size: 40px;
+  position: absolute;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(60deg);
+  }
+}