Added Shapes/Patterns in DOM using Loops in JavaScript

gdscmuet · Oct 23, 2021 · 5a8317e · 5a8317e
1 parent 6aed409
commit 5a8317e
Show file tree

Hide file tree

Showing 8 changed files with 164 additions and 0 deletions.
diff --git a/Patterns Using Loops/icon.png b/Patterns Using Loops/icon.png
diff --git a/Patterns Using Loops/index.html b/Patterns Using Loops/index.html
@@ -0,0 +1,78 @@
+<!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>Patterns</title>
+    <link rel="icon" href="icon.png">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <style>
+        header h1 {
+            padding: 10px;
+        }
+        kbd{
+            font-family: "Terminal";
+        }
+        hr{
+            background: #35cc27;
+            height: 100px;
+        }
+        section{
+            display: flex;
+            margin-top: 100px;
+        }
+        .button-array{
+            margin: auto;
+            padding:50px;
+        }
+        button{
+            margin: 20px;
+            padding: 10px;
+        }
+        button img{
+            height: 30px;
+            width: 30px;
+        }
+        .result-section{
+            padding: 30px;
+            width: 300px;
+            border-radius: 10px;
+        }
+        #result{
+            margin: auto;
+        }
+    </style>
+    <script src="script.js"></script>
+</head>
+<body>
+    <header>
+        <h1 class="display-3 bg-dark text-light text-center">Shapes using JavaScript {}</h1>
+    </header>
+    <section class="container">
+            <div class="button-array">
+                <h4>Choose Shape</h4>
+                <hr class="col-md-4">
+                <button class="btn btn-success" onClick="rightAngleTriangleRight()">
+                    <img src="rightTriangleRight.png" alt="Right Triangle Right">
+                </button>
+                <button class="btn btn-success" onClick="rightAngleTriangleInvertRight()">
+                    <img src="rightTriangleInvertRight.png" alt="Right Triangle Invert Right">
+                </button>
+                <br>
+                <button class="btn btn-success" onClick="pyramid()">
+                    <img src="pyramid.png" alt="Right Triangle Left">
+                </button>
+                <button class="btn btn-success" onClick="invertPyramid()">
+                    <img src="pyramidInvert.png" alt="Invert Pyramid">
+                </button>
+            </div>
+            <div class="result-section bg-dark text-light border border-success">
+                <h4 class="display-6 text-center">Result</h4>
+                <hr class="text-success">
+                <div id="result" class="text-info"></div>
+            </div>
+        </section>
+    </section>
+</body>
+</html>
diff --git a/Patterns Using Loops/pyramid.png b/Patterns Using Loops/pyramid.png
diff --git a/Patterns Using Loops/pyramidInvert.png b/Patterns Using Loops/pyramidInvert.png
diff --git a/Patterns Using Loops/rightTriangleInvertRight.png b/Patterns Using Loops/rightTriangleInvertRight.png
diff --git a/Patterns Using Loops/rightTriangleLeft.png b/Patterns Using Loops/rightTriangleLeft.png
diff --git a/Patterns Using Loops/rightTriangleRight.png b/Patterns Using Loops/rightTriangleRight.png
diff --git a/Patterns Using Loops/script.js b/Patterns Using Loops/script.js
@@ -0,0 +1,86 @@
+/*
+    Script for generating different shapes/patterns using loops in JavaScript
+*/
+
+/*
+    X
+    X X
+    X X X
+    X X X X
+    X X X X X
+*/
+function rightAngleTriangleRight(){
+    var lines = 5;
+    var triangle = "";
+    for(var i=0;i<lines;i++){
+        for(var j=0;j<=i;j++){
+            triangle += "X ";
+        }
+        triangle += "<br>"
+    }
+    document.getElementById('result').innerHTML = triangle;
+    document.getElementById('result').style.textAlign="start"
+}
+/*
+    X X X X X
+    X X X X
+    X X X 
+    X X
+    X
+*/
+function rightAngleTriangleInvertRight(){
+    var lines = 5;
+    var triangle = "";
+    for(var i = 0; i < lines; i++){
+        for(var j = i; j < lines; j++) {
+            triangle += "X "
+        }
+        triangle += "<br>"
+    }
+    document.getElementById('result').innerHTML = triangle;
+    document.getElementById('result').style.textAlign="start"
+}
+/*
+        X
+       X X
+      X X X
+     X X X X
+    X X X X X
+*/
+function pyramid(){
+    var lines = 5;
+    var triangle = "";
+    for(var i = 0; i < lines; i++){
+        for(var j = i; j < lines; j++) {
+            triangle += " "
+        }
+        for(var j = 0; j <= i; j++) {
+            triangle += "X "
+        }
+        triangle += "<br>"
+    }
+    document.getElementById('result').innerHTML = triangle;
+    document.getElementById('result').style.textAlign="center"
+}
+/*
+    X X X X X
+     X X X X
+      X X X 
+       X X
+        X
+*/
+function invertPyramid() {
+    var lines = 5;
+    var triangle = "";
+    for(var i = 0; i < lines; i++){
+        for(var j = 0; j < i; j++){
+            triangle += " "
+        }
+        for(var j = lines; j > i; j--){
+            triangle += "X "
+        }
+        triangle += "<br>"
+    }
+    document.getElementById('result').innerHTML = triangle;
+    document.getElementById('result').style.textAlign="center"
+}