Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Finished Skills Asessment #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Finished Skills Asessment #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/node_modules
112 changes: 112 additions & 0 deletions dist/bundle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ }
/******/ };
/******/
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/
/******/ // create a fake namespace object
/******/ // mode & 1: value is a module id, require it
/******/ // mode & 2: merge all properties of value into the ns
/******/ // mode & 4: return value when already ns object
/******/ // mode & 8|1: behave like require
/******/ __webpack_require__.t = function(value, mode) {
/******/ if(mode & 1) value = __webpack_require__(value);
/******/ if(mode & 8) return value;
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ var ns = Object.create(null);
/******/ __webpack_require__.r(ns);
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ return ns;
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = "./src/js/app.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/css/main.scss":
/*!***************************!*\
!*** ./src/css/main.scss ***!
\***************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./src/css/main.scss?");

/***/ }),

/***/ "./src/js/app.js":
/*!***********************!*\
!*** ./src/js/app.js ***!
\***********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _css_main_scss__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../css/main.scss */ \"./src/css/main.scss\");\n/* harmony import */ var _css_main_scss__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_css_main_scss__WEBPACK_IMPORTED_MODULE_0__);\n\nvar emails = document.getElementsByClassName(\"email\");\nvar phones = document.getElementsByClassName(\"phone\");\nvar contactPreview = document.getElementById(\"contact-preview\"); // Function to change contacts view option\n\ncontactPreview.addEventListener(\"change\", function () {\n var choice = contactPreview.selectedOptions;\n\n for (var i = 0; i < choice.length; i++) {\n if (choice[i].value === 'email') {\n for (var _i = 0; _i < emails.length; _i++) {\n emails[_i].classList.remove(\"hidden\");\n\n phones[_i].classList.add(\"hidden\");\n }\n } else {\n for (var _i2 = 0; _i2 < phones.length; _i2++) {\n phones[_i2].classList.remove(\"hidden\");\n\n emails[_i2].classList.add(\"hidden\");\n }\n }\n }\n}, false);\n\n//# sourceURL=webpack:///./src/js/app.js?");

/***/ })

/******/ });
280 changes: 280 additions & 0 deletions dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>Title</title>
<!-- Fonts -->

<!-- Main Stylesheet -->
<link href="main.css" rel="stylesheet"></head>
<body>
<!-- !- - - - - - - - Contacts Start - - - - - - - - -->
<div class="contact-wrapper">
<h2>Contacts</h1>
<!-- List Start -->
<ul class="contact-list">
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Christian</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Christian</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Rich</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Rich</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Scott</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Scott</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Danny</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Danny</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color offline"></div>
</div>
<p class="username">Taka</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color offline"></div>
</div>
<p class="username">Taka</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color incall"></div>
</div>
<p class="username">Tim</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color incall"></div>
</div>
<p class="username">Tim</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Patrick</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color online"></div>
</div>
<p class="username">Patrick</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
<li class="contacts">
<div class="contacts-base">
<div class="contact">
<div class="online-status">
<div class="online-color busy"></div>
</div>
<p class="username">Jacques</p>
</div>
<div class="contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone hidden">323-555-1234</p>
</address>
</div>
</div>
<div class="contacts-hover">
<div class="contact">
<div class="online-status">
<div class="online-color busy"></div>
</div>
<p class="username">Jacques</p>
</div>
<div class="full contact-preview">
<address>
<p class="email">[email protected]</p>
<p class="phone">555-555-5555</p>
<p class="address">6539 Wilton Ave.<br />Culver City Ca 90234</p>
</address>
</div>
</div>
</li>
</ul>
<!-- List End -->
<!-- Dropdown Toggle -->
<form class="toggle">
<select id="contact-preview" name="contact-preview">
<option value="email">Email address</option>
<option value="phone">Phone number</option>
</select>
</form>
</div>
<!-- !- - - - - - - - JavaScript Start - - - - - - - - -->
<!-- Main/Specific JS -->
<script type="text/javascript" src="bundle.js"></script></body>
</html>
Loading