fix:phase-5 correction

Limyangtyin · Nov 28, 2023 · 0758acd · 0758acd
1 parent e598ccc
commit 0758acd
Show file tree

Hide file tree

Showing 18 changed files with 471 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -21,7 +21,7 @@ <h1>Certificate IV in IT (Programming) Web Tech Portfolio</h1>
             <li><a href="phase-2">Phase 2</a></li>
             <li><a href="phase-3">Phase 3</a></li>
             <li><a href="phase-4">Phase 4</a></li>
-            <li><a href="phase-5">Phase 5</a></li>
+            <li><a href="index.html">Phase 5</a></li>
         </ul>
     </nav>
 </header>
@@ -45,7 +45,7 @@ <h2 class="text-xl font-bold text-gray-500">Certificate IV in IT (Programming)</
                 <a href="phase-4">Phase 4</a>
             </section>
             <section>
-                <a href="phase-5">Phase 5</a>
+                <a href="index.html">Phase 5</a>
             </section>
 
         </div>

diff --git a/phase-4/.gitignore b/phase-4/.gitignore
diff --git a/phase-4/.keep b/phase-4/.keep
diff --git a/phase-4/README.md b/phase-4/README.md
@@ -0,0 +1,9 @@
+Colour Scheme
+| Name            | RGB            | HEX      |
+|-----------------|----------------|----------|
+| black           | 0, 0, 0        | #000000  |
+| white           | 255, 255, 255  | #FFFFFF  |
+| olivine         | 158, 178, 93   | #9EB25D  |
+| columbian blue  | 167, 198, 218  | #A7C6DA  |
+| nyanza          | 238, 252, 206  | #EEFCCE  |
+| naples yellow   | 241, 219, 75   | #F1DB4B  |
diff --git a/phase-4/WebTechAssessment b/phase-4/WebTechAssessment
diff --git a/phase-4/assests/css/reset.css b/phase-4/assests/css/reset.css
@@ -0,0 +1,100 @@
+/***
+    The new CSS reset - version 1.9 (last updated 19.6.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
+    all: unset;
+    display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a, button {
+    cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol, ul, menu {
+    list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+    max-inline-size: 100%;
+    max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+    border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input, textarea {
+    -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+    white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+    -webkit-appearance: revert;
+    appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+    all: revert;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+    color: unset;
+}
+
+/* remove default dot (â€¢) sign */
+::marker {
+    content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+    display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+    -moz-user-modify: read-write;
+    -webkit-user-modify: read-write;
+    overflow-wrap: break-word;
+    -webkit-line-break: after-white-space;
+    -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+    -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+    all: revert;
+}
diff --git a/phase-4/assests/css/style.css b/phase-4/assests/css/style.css
@@ -0,0 +1,121 @@
+@media screen and (max-width: 1200px){
+    .headerclass{
+        border: 1px solid black;
+        background-color: #F1DB4B;
+    }
+    main{
+        border: 2px solid black;
+        background-color: #9EB25D;
+    }
+
+    .footerclass{
+        border: 1px solid black;
+        background-color: #A7C6DA;
+    }
+
+    main>article{
+        padding: 20px;
+        border: 1px solid black;
+        background-color: #EEFCCE;
+    }
+
+    nav, aside{
+        display: none;
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .headerclass {
+        border: 1px solid black;
+        background-color: #F1DB4B;
+    }
+
+    nav > a {
+        border: 1px solid black;
+        margin: 2px;
+        padding: 3px;
+    }
+
+    main {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        border: 2px solid black;
+        background-color: #9EB25D;
+    }
+
+    .footerclass {
+        border: 1px solid black;
+        background-color: #A7C6DA;
+    }
+
+    .grid-container {
+        display: grid;
+        grid-template-columns: auto auto auto;
+        padding-top: 80px;
+    }
+
+    main > article {
+        border: 1px solid black;
+        margin: 10px;
+        padding: 20px;
+        width: auto;
+        background-color: #EEFCCE;
+    }
+
+    aside{
+        grid-column: 3;
+        grid-row: 1/span 3;
+        border: 1px solid black;
+        margin: 10px;
+        padding: 20px;
+    }
+
+    aside>section{
+        border: 1px solid black;
+        margin: 10px;
+        padding: 20px;
+    }
+
+    #cars{
+        margin: 20px;
+        padding: 20px;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+        background-color: #f7f7f7;
+        max-width: 400px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    label{
+        display: block;
+    }
+
+    input{
+        padding: 3px;
+        border: 1px solid black;
+    }
+
+    input::placeholder{
+        color: rgba(0, 0, 0, 0.5);
+    }
+
+    button{
+        background: linear-gradient(to bottom, #aaa, #888);
+        border: 1px solid #444;
+        border-radius: 5px;
+        color: #cccccc;
+        padding: 10px 20px;
+        box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
+        margin-left: 5px;
+    }
+
+    #dataBox{
+        margin: 10px;
+        padding: 10px;
+        border: 1px solid black;
+        width: 200px;
+        height: 400px;
+        background-color: #cccccc;
+    }
+}
diff --git a/phase-4/assests/js/javascript.js b/phase-4/assests/js/javascript.js
@@ -0,0 +1,30 @@
+document.getElementById("GetCars").addEventListener('click', function(event) {
+    event.preventDefault();
+
+    const carsModel = document.getElementById('carsModel').value.toLowerCase();
+
+    fetch('https://api.api-ninjas.com/v1/cars?model=' + carsModel, {
+        headers: {
+            'X-Api-Key': 's5o4B87e3l5cpOmIZI/JOA==KkcbIdeoiXB7zH5b'
+        }
+    }).then(function (response) {
+        if (!response.ok) {
+            throw new Error('Network response was not ok');
+        }
+        return response.json();
+    }).then(function (data) {
+        if (data.length > 0) {
+            const carInfo = data[0];
+            const {make, model, year} = carInfo;
+
+            // Display car information in HTML
+            document.getElementById('make').textContent = 'Make: ' + make;
+            document.getElementById('carModel').textContent = 'Model: ' + model;
+            document.getElementById('carYear').textContent = 'Year: ' + year;
+        } else {
+            console.log("Car's information not found");
+        }
+    }).catch(function (error) {
+        console.error('Error:', error.message);
+    });
+});
diff --git a/phase-4/img.png b/phase-4/img.png
diff --git a/phase-4/img/Html and CSS Joke.jpg b/phase-4/img/Html and CSS Joke.jpg
diff --git a/phase-4/img/Joke about user error.jpg b/phase-4/img/Joke about user error.jpg
diff --git a/phase-4/img/Programming joke.png b/phase-4/img/Programming joke.png
diff --git a/phase-4/img/Story illustration.jpg b/phase-4/img/Story illustration.jpg
diff --git a/phase-4/img/ilya-pavlov-OqtafYT5kTw-unsplash.jpg b/phase-4/img/ilya-pavlov-OqtafYT5kTw-unsplash.jpg
diff --git a/phase-4/img_1.png b/phase-4/img_1.png
diff --git a/phase-4/img_2.png b/phase-4/img_2.png