Skip to content

jenhjlim/SaferTrip_JL

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

104 Commits

after_merge

after_merge

 
 

README.md

README.md

 
 

index.html

index.html

 
 

script.js

script.js

 
 

style.css

style.css

 
 

Repository files navigation

SaferTrip_JL

My part of developing the SaferTrip web app

GitHub repository for the group project can be accessed here.

Table of Contents

  1. Main Page
  1. Settings
  1. Crime-ridden Areas Report Options
  1. Tutorials Pages
  1. Side Navigation Menu
  1. Useful Information
  1. Built With

1. Main Page

1.1. Responsive Web Design

1.1.1. Responsive Breakpoints

The @media rule is used in media queries to apply different styles for different media types/devices

meta viewport is needed to detect the width of devices.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Started with small screens first and worked up.

1. Smartphones (320 x 568) 
@media screen and (min-width : 0px) and (min-height: 0px)
2. Galaxy S5 (360 x 640) 
@media screen and (min-width : 360px) and (min-height: 64-px)
3. iPhones 6/7/8 (375 x 667) 
@media screen and (min-width : 375px) and (min-height: 667x)
4. iPhone X (375 x 812) 
@media screen and (min-width : 375px) and (min-height : 812px)
5. iPhones 6/7/8 plus (414 x 746)  
@media screen and (min-width : 414px) and (min-height: 746x)
6. iPads (768 x 1024) 
@media screen and (min-width : 768px) and (min-height: 1024px)
7. iPad Pro (1024 x 1366) 
@media screen and (min-width : 1024px) and (min-height: 1366px) 
8. Desktop
@media screen and (min-width : 630px)

1.1.1.1. Acknowledgements

  • CSS @media rule @ w3schools
  • 2017.03.31 Stop using device breakpoints (by Adam Silver @ Medium)
  • 2012.10.08 How to deal with various screen sizes by using CSS3 @media query in Korean (by Seong-Kwang Song @ his blog)
  • CSS background image to fit width, height should auto-scale in proportion @ StackOverflow
  • Responsive web design @ ShayHowe
  • Media query font-size not working @ StackOverflow

1.1.2. Responsive background - full screen

At first, I used ackground-size: 100% 100%; and the background image I received didn't fit into some screen sizes.

For example, there were empty spaces on left & right sides for the following screen sizes: 360 x 640, 768 x 1024, 1024 x 1366 and empty spaces on top & bottom sides for the following screen sizes: 411 x 823, 375 x 812. So, I did the following:

body{
    background: url("Images/main_1_cover.svg") no-repeat center center fixed;
    background-size: cover;
}

But, for desktop, when background-size: cover was used, I could't see the cat in my image. Because, the original size of my image's height was much longer than the width.

So, I wanted to repeat only a partial part of my image that a cat didn't appear. When I used background-size: contain & background-repeat: repeat-x, what I saw was the following:

current_small.png

Because I wanted to see the cat only in the middle, I asked a question on StackOverflow and learned about multiple background from Temani Afif. This solved the issue.

@media screen and (min-width : 630px) {
    body {
        /* vh: hundredths of the viewport height. */
        height:100vh;
        background:
            /*the main background*/
            url(Images/main_1_cover.svg) center,
            url(Images/main_1_cover.svg) 40% 50%,
            /*repeat the left part*/
            url(Images/main_1_cover.svg) 30% 50%,
            url(Images/main_1_cover.svg) 20% 50%,
            url(Images/main_1_cover.svg) 10% 50%,
            url(Images/main_1_cover.svg) 0% 50%,
            /*repeat the right part*/
            url(Images/main_1_cover.svg) 60% 50%,
            url(Images/main_1_cover.svg) 70% 50%,
            url(Images/main_1_cover.svg) 80% 50%,
            url(Images/main_1_cover.svg) 90% 50%,
            url(Images/main_1_cover.svg) 100% 50%;
        background-repeat:no-repeat;
        background-size:contain;         
    }
}

1.1.2.1. Acknowledgements

  • CSS repeat-x BUT only a part I want in an image @ StackOverflow

1.2. How to Fade In on Page Load

1.2.1. Method 1 : Changing opacity from 0 to 1

#fallingStars{
    opacity: 0;
}
#title{
    opacity: 0;
}
#slogan{
    opacity: 0;
$(document).ready(function() {
    $("#fallingStars").delay(200).animate({'opacity':'1'},500);
    $("#title").delay(500).animate({'opacity':'1'},800);
    $("#slogan").delay(800).animate({'opacity':'1'},800);

1.2.1.1. Acknowledgements

1.2.1.2. Limit

Increasing opacity from 0 to 1 and including contents in a html document prevents me from creating a singple page application.

1.2.2. Method 2 :

1.2.2.1. Acknowledgements

2. Settings

2.1. How to Use jQuery with Bootstrap 4.1.2.

To use Bootstrap CDN, links of JS stated in the bootstrap website need to be added. But, when I copied and pasted the links in a html document. It didn't work.

I solved the issue by replacing the jQuery & Popper.js scripts with jQuery Google CDN.

<!-- [Before] -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- [After] -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

All Google fonts are released under open source licenses. So, those can be used in any non-commercial or commercial project.

2.2. Fonts Comparison

fonts.png

Default vs Sunflower font vs Poor Story font

<!-- [Google Fonts] To embed your selected fonts into a webpage, copy this code into the <head> of your HTML document. -->
<link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">
/* [Google Fonts] Use the following CSS rules to specify these families: */
body{
    font-style: normal;
    font-family: 'Poor Story', sans-serif;
}

2.2.1. Acknowledgments

2.3. Detecting Language of a Visitor

1. Parse the Accept-Language HTTP header, which contains information about users' language preferences
2. (If the server can't find matching language(s)) Determine users' location from their IP address

Instead of deteting language of a visitor, we decided to make the web app's default language as Korean and provide buttons to switch between Korean and English. The reason is that we expect that most of users are Koreans living in Korea. Also, because we used local storage, users who want to use the app in English do not need to press the button every time they access the app.

2.3.1. Acknowledgements

  • Website that recognizes user's location/IP & changes lang. based on that @ StackOverflow
  • Accept-Language @ MDN
  • Accept-Language used for locale setting @ w3schools
  • Detecting language of a visitor @ Localize

2.4. Building a Multilingual Website

Inspired by Adam Azad's answer in this StackOverflow post, I started working on creating a multilingual web app that saves a user's selected language. I can successfully switch back and forth between English and Korean for all contents in my web app except for contents in SweetAlert2 messages.

  • After setting up, I added class="lang" and key="(a key name that matches a content goes here)" for each content.

Because I was able to customized confirmButtonText by changing from Got it! to '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>', I thought I could simply add class="lang" and a key name to create multilingual popup messages in SweetAlert2.

  • Changed from 'Thank you!' to '<h2 class="lang" key="thxMsgTitle"></h2>' : nothing shows up.
  • Changed form 'Your input has been recorded.' to '<div class="lang" key="thxMsgContent"></div>' : instead of the text, the code shows up in the popup message.
  • Changed from <div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div> to '<div class="lang" key="thxMsgConfirmBtnTxt" id="swal2-confirmBtnTxt" style="color:#000000"></div>' : nothing shows up.

Why it didn't work: (explanation by Milney) When the following code is executed, SweetAlert2 elements is not loaded onto a web page yet.

$(".lang").each(function(index, element) {
    $(this).text(arrLang[lang][$(this).attr("key")]);
});

In order to solve the issue, I should either call this again straight after the SweetAlert2 call or add some kind of event listener that does this when elements are added dynamically.

Milney also provided alternative solution and decided to use this method.

STEP 1 : Pulling the correct value out of the array as I created SweetAlert2 messages. (e.g., confirmButtonText: arrLang[lang]['thxMsgConfirmBtnTxt'])

STEP 2 : Because that didn't automatically update contents in SweetAlert2 messages when "English" or "Korean" button was clicked, I forced a webpage to refresh when "English" or "Korean" button was clicked by adding value="Refresh Page" onClick="window.location.reload()".

<body>
    <button class="translate langBtn" id="en-us" value="Refresh Page" onClick="window.location.reload()">English</button>
    <button class="translate langBtn" id="ko" value="Refresh Page" onClick="window.location.reload()">한국어</button>

    <div id="mainPage">
        <p class="lang" key="mainPgTitle" id="title"></p>
        <p class="lang" key="subTitle" id="slogan"></p>    
    </div>
</body>
var arrLang = {
    "en-us": {
        "mainPgTitle": "SaferTrip",
        "subTitle": "Find safer paths to travel",
    },
    "ko": {
        "mainPgTitle": "야옹씨의 안전한 하루",
        "subTitle": "내가 만들어나가는 우리동네 안전 지도"
    }
};

// The default language is Korean
var lang = "ko";
// Check for localStorage support (save language choice)
if("localStorage" in window){
    var usrLang = localStorage.getItem("uiLang");
        if(usrLang) {
            lang = usrLang
        }
}

$(document).ready(function() {

    // // * language setting START
    $(".lang").each(function(index, element) {
        $(this).text(arrLang[lang][$(this).attr("key")]);
    });
      
    // get/set the selected language
    $(".translate").click(function() {
        var lang = $(this).attr("id");

        // update localStorage key
        if("localStorage" in window){
            localStorage.setItem("uiLang", lang);
            // console.log( localStorage.getItem('uiLang') );
        }
        $(".lang").each(function(index, element) {
          $(this).text(arrLang[lang][$(this).attr("key")]);
        });
    });
    // // * language setting END
}

localstorage allows me to save users' selected language.

2.4.1. Acknowledgements

  • Build multiple language website using jQuery and JSON based methods @ StackOverflow
  • Window localStorage Property @ w3schools
  • ISO 639-1 standard language codes @ Andiamo
  • How can I create multi-language popup messages in SweetAlert2? @ StackOverflow

2.5. Moving to a Different Webpage on Click

    $("body").click(function(){
        window.location = window.location + "main";
    });

It directs to localhost:3000/main.

3. Crime-ridden Areas Report Options

3.1. Fadein() on Click

I wanted to show options after clicking a button. So, I used ":hidden" & ".fadeIn()".

<div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" id="option1"><span>Lonesome<br>road</span></div>
    <div class="options" id="option2"><span>Too<br>Dark</span></div>
    <div class="options" id="option3"><span>There<br>was an<br>incident</span></div>
    <div class="options" id="option4"><span>Red-light<br>district</span></div>
    <div class="options" id="option5"><span>Etc</span></div>
</div>
$('#test').click(function(){
    $(".options:hidden").fadeIn();
});

3.1.1. Acknowledgements

3.2. Center Texts Inside Circles Vertically & Horizontally

In other StackOverflow posts, people gave solutions by using display: flex & vertical-align: middle & justify-content: center. However, I can't use the option and solutions using display: table-cell, because I would like to keep display: none for options class not to show the circles when people visit the webpage. Also, I didn't set line-height same as height of a div, because this method worked for only one line of text and some of my texts became two lines inside a div.

3.2.1. By using "span"

<div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" id="option1"><span>Lonesome<br>road</span></div>
    <div class="options" id="option2"><span>Too<br>Dark</span></div>
    <div class="options" id="option3"><span>There<br>was an<br>incident</span></div>
    <div class="options" id="option4"><span>Red-light<br>district</span></div>
    <div class="options" id="option5"><span>Etc</span></div>
</div>
.options {
    background: #f7f7f5;
    display: none;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    /* vertically & horizontally middle */
    left: 50%;
    top: 50%; 
    /* circle */
    border-radius: 50%;
    border-style: solid;
    border-color: #F3C78D;
}

.options span {
    color: #000000;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    /* Center texts inside circles */
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%);
}

3.2.2. Without using "span" as well as "display: flex" or "display: table-cell"

Aftering adding codes to make a multi-language web app, I couldn't see texts in circles wrapped in <span>. So, I used <p> tag instead.

.options span has been changed to .options > p.

<div class="container">
    <button type="button" id="test">test</button>
    <div class="options withoutInput" id="option1"><p class="lang" key="firstOption"></p></div>
    <div class="options withoutInput" id="option2"><p class="lang" key="secondOption"></p></div>
    <div class="options withoutInput" id="option3"><p class="lang" key="thirdOption"></p></div>
    <div class="options withoutInput" id="option4"><p class="lang" key="fourthOption"></p></div>
    <div class="options withInput" id="option5"><p class="lang" key="fifthOption"></p></div>
</div>

3.2.3. Acknowledgments

  • CSS center text (horizontally and vertically) inside a div block @ StackOverflow
  • How do I vertically align text in a div? @ StackOverflow
  • Quick CSS trick: How to center an object exactly in the center @ CSS Tricks

3.3. Positioning Divs

To position five divs to look like a circle around a button, I used the translate() function. The function accepts two arguments, indicating how much to move the element along the x and y axes respectively. For X and Y axes, I didn't use pixels. The reason is that I would need to find different pixels for each responsive breakpoints.

circles.png

#option1{
    transform: translate(-100%, -150%);
}

#option2{
    transform: translate(-160%, -40%);
}

#option3{
    transform: translate(-50%, 50%);
}

#option4{
    transform: translate(60%, -40%);
}

#option5{
    transform: translate(15%, -150%);
}

3.3.1. Acknowledgements

  • translate() @ MDN
  • CSS translate() function @ Quackit

3.4. Changing DIV Background Color

As of jQuery 3.0, .bind() has been deprecated. It was superseded by the .on() method for attaching event handlers to a document since jQuery 1.7, so its use was already discouraged.

    $('#test').click(function(){
        $(".options:hidden").fadeIn().on("click", function(){
            $(this).css("background", "#F3C78D");
        });
    });

3.4.1. Acknowledgements

  • DIV Background Color Change
    • Change DIV background color with .click(function(){ @ StackOverflow
  • .on()
    • 2011.12.07 jQuery 1.7 .on() vs .live() review by Sam Deering @ SitePoint
    • .bind() @ jQuery

3.5. Customized SweetAlert2 Popup Boxes

SweetAlert2 allows us to create beautiful, responsive, customizable, accessible popup boxes.

3.5.1. "Thank-you" Message

.on({click: function(){
    swal({
        title: 'Thank you!',
        text: 'Your input has been recorded.',
        imageUrl: 'https://s25.postimg.cc/42csriokf/cat_Logo.png', 
        imageAlt: 'Cat logo',
        animation: false,
        customClass: 'swal2-thx-msg',
        // backdrop color : light gray
        backdrop: `
            rgba(211,211,211,0.4) 
            center left
            no-repeat
        `,
        confirmButtonColor: '#9FEDDA',
        confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!</div>'
    })}
});

3.5.2. "Cancel" Message

.on({click: function(){
    swal({
        title: 'Are you sure?',
        imageUrl: 'https://s25.postimg.cc/42csriokf/cat_Logo.png',
        imageAlt: 'Cat logo',
        animation: false,
        customClass: 'swal2-cancel-msg',
        // backdrop color : light gray
        backdrop: `
            rgba(211,211,211,0.4) 
            center left
            no-repeat
        `,
        // Crime-ridden areas : #F3C78D & Safe areas : #9FEDDA
        showCancelButton: true,
        confirmButtonColor: '#F3C78D',
        confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
        cancelButtonColor: '#9FEDDA',
        cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
    }).then((result) => {
        if (result.value){
            swal({
                title: 'Recorded!',
                text: 'Your input has been deleted.',
                type: 'success',
                animation: true,
                customClass: 'swal2-cancel-confirm-msg',
                // backdrop color : light gray
                backdrop: `
                    rgba(211,211,211,0.4) 
                    center left
                    no-repeat
                `,
                confirmButtonColor: '#9FEDDA',
                confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Got it!<div id="swal2-confirmBtnTxt" style="color:#000000">'            
            });
        }
    })}
});

3.5.3. "Text Input" Message

Async/await is a way to write asynchronous code. The keyword await makes JavaScript wait until that promise settles and then go on with its result.

.on({click: async function(){
    const {value: text} = await swal({
    title: 'Why do you feel unsafe here?',
    input: 'text',
    inputPlaceholder: 'Type your message :)',
    customClass: 'swal2-textbox-msg',
    showCancelButton: true,
    confirmButtonColor: '#F3C78D',
    confirmButtonText: '<div id="swal2-confirmBtnTxt" style="color:#000000">Yes!</div>',
    cancelButtonColor: '#9FEDDA',
    cancelButtonText: '<div id="swal2-cancelBtnTxt" style="color:#000000">Cancel</div>',
    });

    if (text) {
    swal(
        `Your entered : <div id="swal2-textBoxTxt" style="color:#426A6F">"${text}"</div>`
    )}}
});

3.5.4. Acknowledgements

  • SweetAlert2
    • SweetAlert2 official page @ GitHub
    • Creating pretty popup messages using SweetAlert2 @ TutsPlus
    • SweetAlert2 getting it to work @ Laracasts
    • Support rem units for sizing @GitHub
    • Alert changes body padding style @ GitHub
    • Sweetalert 2 textarea async @StackOverflow
  • CSS Techniques
    • 2018.01.15 45+ jQuery javaScript CSS popup window dialog box @ Fresh Design Web
    • Simple confirmation popup @ CodyHouse
    • CSS element>element selector @ w3schools
    • Centering a div within a div, inner DIV responsive @ Tipue
    • Enlarging images using CSS or Javascript @ StackOverflow
  • Node.js Techniques
    • 6 Reasons why JavaScript’s Async/Await blows promises away (Tutorial) by Mostafa Gaafar @ HackerNoon
    • Async/await @ JavaScript Info

3.6. Different Popup Messages between Options 1-4 and Option 5

3.6.1. Showing Different Images in SweetAlert2 Popup Messages

Use data-attribute to define the image link inside the element

$(document).ready(function() {
    $('#test').click(function(){
    $(".options:hidden").fadeIn()
        .on("click", function(){
        $(this).css("background", "#F3C78D");
        })
        .on("click", function(){
        var url=$(this).attr('data-img');
        swal({
            title: 'Sweet!',
            text: 'Modal with a custom image.',
            imageUrl: url,
            imageWidth: 400,
            imageHeight: 200,
            imageAlt: 'Custom image',
            animation: false
            })
        });
    });
});
  <div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" data-img="https://unsplash.it/400/200" id="option1"><span>Hello<br>World</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option2"><span>Goodbye</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" data-img="https://unsplash.it/400/200" id="option4"><span>Fine</span></div>
    <div class="options" data-img="https://s25.postimg.cc/kw0l49gz3/original.png" id="option5"><span>Okay</span></div>
  </div>

3.6.2. Different SweetAlert2 Popup Messages

Temani Afif let me know how to execute different SweetAlert function. His solution was using if($(this).attr('id')!="option5") and else within .on("click", function(){}. (jsFiddle for his solution can be found here).

.on("click", function(){
    if($(this).attr('id')!="option5") {
        swal({
            title: 'Sweet!',
            text: 'Modal with a custom image.',
            imageUrl: 'https://unsplash.it/400/200',
            imageWidth: 400,
            imageHeight: 200,
            imageAlt: 'Custom image',
            animation: false
        })
    } else {
        swal(
            'The Internet?',
            'That thing is still around?',
            'question'
        )
    }
});

3.6.3. Executing “function” or “async function” Based on Selection of a Div After Clicking a Button

I wanted to use the textbox popup message that required user input on the SweetAlert2 official webpage and couldn't make it work. I got Uncaught SyntaxError: await is only valid in async function error. So, I searched the issue on StackOverflow and found out that I needed to include async (post). The accepted answer says, "The issue is because you need to declare the click handler function as async in order to use the await keyword within it."

Because await works on swal, swal is a promise.

    <div class="container">
        <button type="button" class="btn btn-outline-success" id="test">test</button>
        <div class="options withoutInput" key="firstOption" id="option1">span>Lonesome<br>road</span></div>
        <div class="options withoutInput" id="option2"><span>Too<br>Dark</span></div>
        <div class="options withoutInput" id="option3"><span>There<br>was an<br>incident</span></div>
        <div class="options withoutInput" id="option4"><span>Red-light<br>district</span></div>
        <div class="options withInput" id="option5"><span>Etc</span></div>
    </div>
$('#test').click(function(){
    $(".withoutInput:hidden").fadeIn()
        .on("click", function(){
            $(this).css("background", "#F3C78D");
        })
        .on({ 
            click: function(){
            // "Thank-you" popup message" //
            }
        });
    $(".withInput:hidden").fadeIn()
        .on("click", function(){
            $(this).css("background", "#F3C78D");
        })
        .on({ 
            click: async function(){
            // "user-input" popup message" //
                const {value: text} = await swal({
                    // swal code goes here
                });
                if (text) {
                    // swal code goes here
                }
            }
        });
});

jsFiddle for this exercise can be found here.

3.6.4. Acknowledgements

  • Combine hover and click functions (jQuery)? @ StackOverflow
  • 2016.02.08 Mouseenter by Mike Bostock @bl.ocks
  • Including a different image in SweetAlert2 popup message based on selection of a div after clicking a button @ StackOverflow
  • SweetAlert2 : Executing “function” or “async function” based on selection of a div after clicking a button @StackOverflow
  • Sweetalert 2 textarea async @ StackOverflow
  • Multiple Class/ID and Class Selectors @ CSS-Tricks

3.7. Not changing background color when "cancel" button is clicked

Added background color only after input was submitted.

.then(function(){
    $(".withInput").css("background", "#F3C78D");
});

4. Tutorials Pages

4.1. How to Overlay A div over Another div

In CSS, all elements are position: static by default. This means the element will be positioned according to its order in the HTML structure, with few exceptions. The other position values are relative, absolute, and fixed. (Explanation by Brett DeWoody)

By using a div with style z-index : 1 and position: absolute, you can overlay your div on any other div.

z-index determines the order in which divs 'stack'. A div with a higher z-index will appear in front of a div with a lower z-index. Note that this property only works with positioned elements.

I set backgrounds z-index as "110" and texts z-index as "111", because something else's z-index was "103".

#mapBackground, #mapBackground1, #mapBackground2, #mapBackground3, #mapBackground4, #mapBackground5, #mapBackground6 {
  background: black;
  opacity: 0.8;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 110;
}

I created backgrounds for each tutorial page, because we wanted to allow users to move onto the next tutorial page by clicking the screen.

I hid all backgrounds and texts at first by using hide(). E.g. $("#mapBackground").hide();. I used fadeOut() and fadeIn() to make a background and texts appear and disappear as needed.

// tutorial page 1 : safe areas
// tutorial page 2 : crime-ridden areas
$('#mapBackground').click(function(){
    $("#tutorialGreen").fadeOut();
    $("#mapBackground").fadeOut();

    $("#mapBackground2").fadeIn();
    $("#tutorialOrange1").fadeIn();
    $("#tutorialOrange2").fadeIn();
});
// tutorial page 3 : tab the map!
// tutorial page 4 : orange icon is appeared!
// tutorial page 5 : crime-ridden areas report options
// tutorial page 6 : find a safer path!

4.1.1. Acknowledgements

4.2. Display Text in a Single Line

white-space: nowrap shows a sentence in div in a single line.

  • [Before] a sentence in two lines : JSFiddle
  • [After] a sentence in one line : JSFiddle

4.2.1. Acknowledgements

4.3. CSS Animation : Blink an Image

I used the feature name animation to create the animation effect on our button.

Defining keyframes is needed to trigger this effect from 0 to 100% by using the opacity feature to reduce the transparency level.

In the animation itself, I needed to specify what wwould be the duration of the animation and whether I wanted the animation to loop infinitely.

#tutorialOrangeSpot{
  animation-name: blink;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}  

@keyframes blink {
  0% {
    opacity: 1;
  }
  49% {
      opacity: 0.4;
  }
  50% {
      opacity: 0.5;
  }
  100% {
      opacity: 1;
  }
}

4.3.1. Acknowledgements

  • How do you make an image blink? @ StackOverflow
  • 2016.02.09 How to create a flashing button using CSS3? @ ByTutorial

5. Side Navigation Menu

5.1. Language Buttons in the Side Naviation Menu

5.1.1. Acknowledgements

  • Position buttons next to each other in the center of page @ StackOverflow

6. Useful Information

6.1. GitHub Markdown : Useful Techniques

6.1.1. Headers

# This is a H1
## This is a H2
### This is a H3
#### This is a H4
##### This is a H5
###### This is a H6

This is a H1

This is a H2

This is a H3

This is a H4

This is a H5
This is a H6

6.1.2. Block Quote

> This is a first blockquote.
>   > This is a second blockquote.

This is a first blockquote.

This is a second blockquote.

6.1.3. List

6.1.3.1. Ordered List

1. First
2. Second
3. Third
  1. First
  2. Second
  3. Third

6.1.3.2. Unordered List

* First
    - Second
        + Third
  • First
    • Second
      • Third

6.1.4. Code Block

  • For HTML codes, put ```HTML before & ``` after
<div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
</div>
  • For CSS codes, put ```CSS before & ``` after
#option1{
    transform: translate(-100%, -150%);
}
  • For JavaScript codes, put ```JS before & ``` after
$(document).ready(function() {
    $("#slogan").delay(800).animate({'opacity':'1'},800);
}

You can also press the tab key once or the space bar four times to create a code block.

*This is a code block.*

This is NOT a code block.

6.1.5. Image Files

I couldn't upload an image in my computer as a part of my README file even after the following attempts:

![circles](/../ImagesREADME/circles.png)
![circles](../ImagesREADME/circles.png)
![circles](./ImagesREADME/circles.png)
![circles](/ImagesREADME/circles.png)
![circles](ImagesREADME/circles.png)
![circles](/../circles.png)
![circles](../circles.png)
![circles](./circles.png)
![circles](/circles.png)
![circles](circles.png)

I finally made it work by uploading images to @ PostImage and copied a link for GitHub markdown provided by PostImage.

[![circles.png](https://s25.postimg.cc/up7mzk9gv/circles.png)](https://postimg.cc/image/6lgvb9qzv/)

circles.png

6.1.6. A Horizontal Line

***
*****
* * *
- - -
---------------------------------------

6.1.7. Inline Links

[Jen Lim's LinkedIn](https://www.linkedin.com/in/hyejunglim/)

Jen Lim's LinkedIn

6.1.8. Emphasize

*italic*
_italic_
**bold**
__bold__
~~striked~~

italic italic bold bold striked

6.1.9. Acknowledgements

6.2. Resources for a Future Project

6.2.1. Front-end

JS

  • The modern JavaScript tutorial by Ilya Kantor @ JavaScript Info
  • 30 Days of Vanlia JS coding challenge by Wes Bos @ JavaScript30
  • Eloquent JavaScript by Margin Haverbeje @ Eloquent JavaScript
  • ECMAScript2018 = ES9
  • Webpack
    • Webpack: When To Use And Why @ Andrew Ray
    • What is Webpack and why should I care? by Ciel @ Medium (Part1, Part2)

CSS

  • Master CSS flexbox by Wes Bos @ FlexBox
  • Learn CSS grid by Wes Bos @CSS Grid
  • CSS Preprocessor : Sass vs Stylus
    • 2012.04.16. Sass vs Stylus @ Design Shack
    • 2018.05.28. 10 reasons to use a CSS Preprocessor in 2018 @ Raygun
    • 2018.05.02. Popular CSS preprocessors 2ith examples: Sass, Less & Stylus @ Raygun
    • Vuetify was built on Stylus (GitHub). Since July 2018, Sass can be used in Vuetify with vuetify-scss (GitHub)
    • 2013.03.01. Difference b/t .sass & .scss @ Responsive Design

Vue

  • Vue : The progressive JavaScript framework
  • Vuex : a state management pattern + library for Vue applications
  • Vuetify : Material design component framework
  • Vue Router : Navigation for a Single-Page Application (SPA)
  • Nuxt.js : Library for server-side rendering, code-splitting, hot-reloading, static generation and more
  • Axios : a promise-based HTTP client
  • Vue CLI 3 : Command Line Interface for rapid Vue development

6.2.2. Back-end

Python

Django

AWS

  • Python/Django 6-week online class in Korean @ Imagineer
  • AWS free tier @ AWS : some features FREE for new customers only for 12 months

PostgreSQL

Firebase

  • Add sign-in to you web app with FirebaseUI @ Firebase

6.2.3. CS Knowledge

In General

Algorithms & Data Structure

  • Four semesters of Computer Science in 6 Hours by Brian Holt @ Frontend Masters
  • Data structures fundamentals @ edX

7. Bulit With

  • HTML, CSS
    • BootStrap 4.1.2. : the world’s most popular framework for building responsive, mobile-first sites
  • JavaScript
    • jQuery 3.3.1. : a lightweight, "write less, do more", JavaScript library
    • SweetAlert2 : A beautiful, responsive, customizable, accessible replacement for JavaScript's popup boxes

2018 © Jen Lim

About

My part of developing the SaferTrip web app

Topics

javascript css html jquery sweetalert2

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages