September 2014

Bootstrap: Modal Dialog Box

Sep 12, 2014

I had a post before about how to create a modal dialog box using native CSS and Javascript (no libraries).

This time, I will make one using Bootstrap.

Required:

You may download the files or just place the following code inside your <head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Next, we create our modal dialog box.

<div class="modal fade" id="modalDialog" role="dialog">
  <div class="modal-dialog">
 <div class="modal-content">
   <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <h4 class="modal-title">[Modal title]</h4>
   </div>
   <div class="modal-body">
  <h1>[Modal Body]</h1>
  <p>Lorem ipsum dolor</p>
  <a href="">Lorem ipsum dolor</a>
  <ul>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ul>
  <ol>
   <li>Lorem ipsum dolor</li>
   <li>Lorem ipsum dolor</li>
  </ol>
   </div>
   <div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save</button>
   </div>
 </div>
  </div>
</div>

We then create the button that would allow the modal to appear.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modalDialog">
 Show Modal
</button>

FIDDLE

Did this work for you?
Any better solutions?

Please feel free to drop a message on the comments section.

Next Line in Instagram Bio (iOS)

Sep 4, 2014

I've been an Instagram user for more than two (2) years now and I've just recently learned how to skip lines on the Bio field.

I have maintained a few ~~un-official~~ accounts in Instagram such as insta_colorsplash and ol.shopper. However, it has always been a problem for me on how to make the bio so presentable and readable.

Whenever I tap on the next key, it will always move me on the next input field.
So I just had to cope up with seeing the words on my bio field placed next to each other. ~~*sucks*~~

But hey!
I finally knew how to skip lines in Instagram! ~~*yeah, finally!*~~
The steps are actually very simple and it makes me feel stupid now of why I haven't tried or thought of it before.

Type your bio on the Notes app of your device.
Copy.
Paste it to the bio field of your Instagram profile.

And voila!

Any alternate solutions?

Feel free to leave a message on the comments section.

Note: This is only applicable for iOS devices.

Javascript: Check if Input is Palindrome

Sep 4, 2014

I had a past post about how to check if input is palindrome in C#.

This one is another Javascript exercise with the same goal.

Instructions:

-create a function that determines the string input as palindrome
-use arrays and loops to check if the string is a palindrome (try reading .split and join function, DO NOT USE REVERSE FUNCTION in javascript)
-use text box to for string input
-use button to determine output
-insert text "is a palindrome" below the text box if string is a palindrome else "not a palindrome" --> use ternary operator for this

Here is my solution.

index.html

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="palindrome.js">
  </script>
 </head>
 <body>
  <input type="text" id="input_text"></input>
  <button onClick="isPalindrome()">Check</button>
  <br />
  <label id="output_text"></label>
 </body>
</html>

palindrome.js

function isPalindrome(){
 var inputString = document.getElementById("input_text").value.toLowerCase();
 var revString = [];
 
 inputString = inputString.replace(/[^a-zA-Z-]/g, ''); //removes all non-alphabet letters, including white space;
  
 for(var indx = inputString.length-1; indx >= 0; indx--){
  revString.push(inputString[indx]);
 }
 
 revString = revString.join('');
 
 document.getElementById("output_text").innerHTML = ""; //set to empty; to 'delete' any value already existing in the node;
 document.getElementById("output_text").innerHTML += (inputString === revString) ? "is a palindrome" : "not a palindrome";
 
}

FIDDLE

For clarifications and/or better solutions, please feel free to leave a message on the comments section.

Javascript: Bubble Sort and Math.Random

Sep 3, 2014

We are given an exercise that needs to be solved using Javascript.

*Bubble sort
-ceate a function that returns a sorted array in ascending order
-within the function, create an array with a size of 10 with random unique numbers (1-100) in it (to generate random numbers try using Math.random() function)
-sort the random values then return the array

*displaying the array
-in respect to problem 1, display the returned array into an ordered list element (<ol>)

Here is my solution to the problem.

Code snippets to help with output tracing is also available as comments.

var num = [];

num = assignValToArray();
bubbleSort(num);
displayOrderedList(num);

// ***** FUNCTIONS *****

//assign n random unique numbers to array;
function assignValToArray(){
 var arr = [];
 var val;
 var maxNum = 100;
 var minNum = 1;
 var n = 10; //size;
 
 while(arr.length < n){
  val = Math.floor(Math.random() * ((maxNum + 1) - minNum) + minNum);
  //check generated value if exists in the array;
  var exist = false;
  for(var x = 0; x < arr.length; x++){
   if(val === arr[x]){
    exist = true;
    break;
   }
  }
  
  //push to array if generated value does not exist;
  if(!exist){
   arr.push(val);
  }
 } 
 //document.write("Original list: " + arr); //original list;
 return arr; 
}

// bubble sort;
function bubbleSort(arr){
 //var count = 0; //count for every iteration;
 do{
  var tmp; //hold temporary value;
  var swap = false;
  for(var i = 0; i < arr.length-1; i++){
   if(arr[i] > arr[i+1]){
    swap = true;
    tmp = arr[i];
    arr[i] = arr[i+1];
    arr[i+1] = tmp;
   }
  }
  //count++;
  //document.write("<br>" + count + "th Iteration: " + num); //list every iteration;
 }while(swap);
}

//display output;
function displayOrderedList(arr){
 document.write("<ol>");
 for(var i = 0; i < arr.length; i++){
  document.write("<li>" + arr[i] + "</li>");
 }
 document.write("</ol>");
}

For questions or for better solutions, feel free to leave a message on the comments section.

Tech Newbie

Pages

Bootstrap: Modal Dialog Box

Next Line in Instagram Bio (iOS)

Javascript: Check if Input is Palindrome

Javascript: Bubble Sort and Math.Random