Day 128: Creating a transfer program part 2

Dan Esmail - 5/8/2023

Intro

with the transfer bucket. I still have a few tasks to work on to make this work. I have to split up the string into pieces for my program to reformat, I’ll also have to create the functions that reformat the code.

Okay first thing I will need to do is split up the main string and get the info by pressing a button


JS
Main Code
                
                    
        $('#change-button').click(function(){
         let text = $('#text-box').val()
            let arr = []
            headBodySplit = text.split('</head>');
         headArr = headBodySplit[0].split('<')
         });

The first thing that I did was use Jquery to get the information from the text area and hold it in a variable. Then I was able to split the string into two sections with the head as a section and a section with the body. This is to make the string easier to deal with. Next, it’s time to work with the string for the head and get what I need.


JS
Adding to the main function 
                
                    $('#change-button').click(function(){
  let text = $('#text-box').val()
  let arr = []
  headBodySplit = text.split('</head>');

  headArr = headBodySplit[0].split('<')
  arr.push(metaSplit(headArr[9]).trim());
  arr.push(metaSplit(headArr[10]).trim());
  arr.push(titleSplit(headArr[11]).trim());
  })

Alright, so I have added a few things to the main that I’ll talk about in a second. The two big things to notice are that there are two new functions and they both have their return values get pushed to an array. Also, the head of the blog post gets split by the < symbol. This is so I can split up every tag in the head and find the parts that I need. This gives me the two meta tags for keywords and description and the title tag. Each one gets fed into their respective functions


JS
MetaSplit code
                
                    function metaSplit(str){
  let head1 =str.split('content='');
  let head2 = head1[1].split(''')
  return head2[0]
}

The metasplit function gets a meta tag from the array of tags from the head. Then it splits it to find the actual keywords or descriptions and spits it out and returns that value to be held in another array.


JS
titleSplit Code
                
                    function titleSplit(str){
  let head1 =str.split('>');
  let head2 = head1[1].split('<')
  return head2[0]
}

Next, I have to change the meta split function a tiny bit to make it usable for the title. This also returns the title of the head and stores it in an array. Now we can add another part to the main function. Which will come in the form of a new function


JS
More Adding to Main 
                
                    $('#change-button').click(function(){
  let text = $('#text-box').val()
  let arr = []
  headBodySplit = text.split('</head>');

  headArr = headBodySplit[0].split('<')
  arr.push(metaSplit(headArr[9]).trim());
  arr.push(metaSplit(headArr[10]).trim());
  arr.push(titleSplit(headArr[11]).trim());
  let mainStr = createHead(arr);
  })

JS
CreateHead Function 
                
                    function createHead(arr){
  let str = `
  <!DOCTYPE html>
  <html lang='en' dir='ltr'>
    <x-blogcss
      key='`+ arr[0] + `'
      des='`+ arr[1] + `'
      title='`+ arr[2] + `'> @endComponentClass
  <body>
        <x-Nav > @endComponentClass

  `
  return str;
}

Alright, so we are finally almost done with the head of the HTML code. To finish up we will need to take all the array values and parse them into a string that will be used later. So I pass the array information to the function's arguments and add it to the start of all my blog strings. This gives me the first section of the blog post.

Tomorrow I will work on the body and once that is all done I will be able to start changing all the documents into Laravle blade templates


Day 1

Day 1