cyberweb 0.4.174 → 0.5.225

data/lib/cyberweb/toplevel_methods/misc.rb

@@ -35,7 +35,7 @@ module Cyberweb
     require 'coderay'
   rescue LoadError; end
 
-  require 'cyberweb/constants/project_constants.rb'
+  require 'cyberweb/constants/constants.rb'
   # ========================================================================= #
   # Require the various web_object/toplevel_methods/ components next:
   # ========================================================================= #
@@ -44,6 +44,7 @@ module Cyberweb
   require 'cyberweb/toplevel_methods/charsets.rb'
   require 'cyberweb/toplevel_methods/cgi.rb'
   require 'cyberweb/toplevel_methods/consider_serving_the_web_object.rb'
+  # require 'cyberweb/toplevel_methods/e.rb'
   require 'cyberweb/toplevel_methods/ee.rb'
   require 'cyberweb/toplevel_methods/hfin.rb'
   require 'cyberweb/toplevel_methods/html_mode.rb'
@@ -55,20 +56,422 @@ module Cyberweb
   require 'cyberweb/toplevel_methods/return_html_to_head_start.rb'
   require 'cyberweb/toplevel_methods/show_and_display.rb'
   require 'cyberweb/toplevel_methods/string_body_start.rb'
+  require 'cyberweb/toplevel_methods/string_content.rb'
   require 'cyberweb/toplevel_methods/svg.rb'
   require 'cyberweb/toplevel_methods/s2.rb'
-  require 'cyberweb/toplevel_methods/string_content.rb'
   require 'cyberweb/toplevel_methods/write_what_into.rb'
   require 'cyberweb/html_tags/option.rb'
 
+  # ========================================================================= #
+  # === send_email
+  #
+  # Use this method to send an email.
+  # ========================================================================= #
+  def send_email
+    w.mail.deliver
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_html_for_the_submarine_component
+  # ========================================================================= #
+  def self.return_html_for_the_submarine_component
+    '<div class="outer_container_for_the_submarine">
+<div class="submarine__container">
+<div class="light"></div>
+<div class="submarine__periscope"></div>
+<div class="submarine__periscope-glass"></div>
+<div class="submarine__sail">
+<div class="submarine__sail-shadow dark1">
+</div>
+<div class="submarine__sail-shadow light1"></div>
+<div class="submarine__sail-shadow dark2"></div>
+</div>
+<div class="submarine__body">
+<div class="submarine__window one">
+</div>
+<div class="submarine__window two">
+</div>
+<div class="submarine__shadow-dark"></div>
+<div class="submarine__shadow-light"></div>
+<div class="submarine__shadow-arcLight"></div>
+</div>
+<div class="submarine__propeller">
+<div class="propeller__perspective">
+<div class="submarine__propeller-parts darkOne"></div>
+<div class="submarine__propeller-parts lightOne"></div>
+</div>        
+</div>
+</div>
+<div class="bubbles__container">
+<span class="bubbles bubble-1"></span>
+<span class="bubbles bubble-2"></span>
+<span class="bubbles bubble-3"></span>
+<span class="bubbles bubble-4"></span>
+</div>
+<div class="ground__container">
+<div class="ground ground1">
+<span class="up-1"></span>
+<span class="up-2"></span>
+<span class="up-3"></span>
+<span class="up-4"></span>
+<span class="up-5"></span>
+<span class="up-6"></span>
+<span class="up-7"></span>
+<span class="up-8"></span>
+<span class="up-9"></span>
+<span class="up-10"></span>
+</div>
+<div class="ground ground2">
+<span class="up-1"></span>
+<span class="up-2"></span>
+<span class="up-3"></span>
+<span class="up-4"></span>
+<span class="up-5"></span>
+<span class="up-6"></span>
+<span class="up-7"></span>
+<span class="up-8"></span>
+<span class="up-9"></span>
+<span class="up-10"></span>
+<span class="up-11"></span>
+<span class="up-12"></span>
+<span class="up-13"></span>
+<span class="up-14"></span>
+<span class="up-15"></span>
+<span class="up-16"></span>
+<span class="up-17"></span>
+<span class="up-18"></span>
+<span class="up-19"></span>
+<span class="up-20"></span>
+</div>
+</div>
+</div>'
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.return_title_of_this_remote_webpage
+  #
+  # This method can fetch the title of a remote webpage. It will make
+  # use of nokogiri by default.
+  #
+  # Usage example:
+  #
+  #   x = Cyberweb.return_title_of_this_remote_webpage(:remote_URL, :simple_regex)
+  #
+  # ========================================================================= #  
+  def self.return_title_of_this_remote_webpage(
+      remote_url = REMOTE_URL,
+      parse_via  = :nokogiri 
+    )
+    require 'open-uri'
+    case remote_url
+    # ======================================================================= #
+    # === :remote_URL
+    # ======================================================================= #
+    when :remote_URL
+      remote_url = REMOTE_URL
+    end
+    case parse_via
+    # ======================================================================= #
+    # === :nokogiri
+    # ======================================================================= #
+    when :nokogiri
+      require 'nokogiri'
+      document = Nokogiri::HTML(URI.open(remote_url))
+      title = document.css('html > head > title').first.content
+      return title.gsub(
+        /[[:space:]]+/,
+        ' '
+      ).strip
+    # ======================================================================= #
+    # === :regex
+    # ======================================================================= #
+    when :regex,
+         :simple_regex
+      dataset = URI.open(remote_url).read
+      regex_to_use = /<title>(.+)<\/title>/ # See: https://rubular.com/r/bUokW9aJb1ncpU
+      return dataset.scan(regex_to_use).flatten.first.to_s.strip
+    end
+  end; self.instance_eval { alias return_title_of_this_webpage return_title_of_this_remote_webpage } # === Cyberweb.return_title_of_this_webpage
+
+  # ========================================================================= #
+  # === Cyberweb.convert_image_to_base64
+  #
+  # Usage example:
+  #
+  #   Cyberweb.convert_image_to_base64("/home/x/programming/ruby/src/cyberweb/images/cyberweb_logo.png")
+  #
+  # ========================================================================= #
+  def self.convert_image_to_base64(this_image)
+    file_type = File.extname(this_image).delete('.').upcase
+    return `magick #{this_image} #{file_type}:- | base64`
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.sort_this_array_by_time
+  #
+  # This method can be used to sort an array by time. In particular it
+  # was designed to sort an array of image-files that include their
+  # "timestamp" as part of the filename.
+  # ========================================================================= #
+  def self.sort_this_array_by_time(array)
+    array.sort_by {|filename|
+      filename = File.basename(filename)
+      if filename =~ /\d{4}/ # Assume a year such as "1984" here.
+        # ================================================================= #
+        # Extract from the start to the year-part next.
+        #
+        # An example for a filename will be:
+        #
+        #   "2013_Marchettigasse_6_Garten_am_Abend.jpg".
+        #
+        # ================================================================= #
+        filename = filename.scan(/^.*\d{4}/).flatten.first
+        filename.tr!('_','.')
+        filename = filename.delete('^0-9.')
+        filename.squeeze!('.') # Some entries may now be "...1986".
+        filename.chop! if filename.end_with? '.'
+        if filename.start_with?('.')
+          if filename.count('.') > 1 # Assume here: ".2.1981"
+            filename.prepend('01') if filename.count('.') == 2
+          else
+            filename.prepend('01.01')
+          end
+        end
+        unless filename.include? '.'
+          unless filename.start_with?('.')
+            filename.prepend('.')
+          end
+          filename.prepend('01.01')
+        end
+        if filename.split('.')[1].to_i > 12
+          splitted = filename.split('.')
+          splitted[1] = '12'
+          filename = splitted.join('.')
+        end
+        sort_on_this = ::Time.parse(filename)
+      else
+        sort_on_this = ::Time.parse('01.01.1970') # Simply assume this here.
+      end
+      sort_on_this
+    }
+  end; self.instance_eval { alias sort_based_on_time sort_this_array_by_time } # === Cyberweb.sort_based_on_time
+
+  # ========================================================================= #
+  # === Cyberweb.return_all_html_tags_in_this_line
+  # ========================================================================= #
+  def self.return_all_html_tags_in_this_line(
+      i = '<p>This <a> <div><h2>ok </h2>'
+    )
+    array = []
+    if i.include? '<'
+      regex = /(<.+?>)/
+      array << i.scan(regex)
+    end
+    return array.flatten
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.translate_html_string_into_webobject_string
+  # ========================================================================= #
+  def self.translate_html_string_into_webobject_string(
+      i = 
+'<div>
+<h2>Hello world!</h2>
+
+<p>This is the first paragraph.</p>
+
+<p>This is the second paragraph. It includes a bit of HTML
+and <b>newlines</b>.</p>
+
+</div>'
+    )
+    do_more_parsing = true
+    result = ''.dup
+    splitted = i.split("\n")
+    splitted.each {|this_line|
+      if this_line.include?('<') and this_line.include?('>')
+        if do_more_parsing
+          all_html_tags_in_this_line = return_all_html_tags_in_this_line(this_line)
+          first_tag = all_html_tags_in_this_line.first
+          result << first_tag.delete('<>')+" {\n"
+          result << "ee '"
+        else
+          result << this_line
+        end
+        do_more_parsing = false
+      end
+    }
+    result << "'\n}\n"
+    return result
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.colourize_ruby_code                               (ruby tag)
+  #
+  # Use this to colourize ruby code. Be careful when using this though
+  # and only use it when you (a) need it and (b) when you have ruby
+  # code in question.
+  # ========================================================================= #
+  def self.colourize_ruby_code(_)
+    _ = _.dup
+    _.gsub!(/class /,
+      '<span class="BG_Black pad1px lightgreen bold">class </span>')
+    _.gsub!(/require/,
+      '<span class="pad1px red FI bold">require</span>')
+    _.gsub!(/end$/,
+      '<span class="BG_Black pad1px red bold">end</span>')
+    _.gsub!(/else/,
+      '<span class="BG_Black pad1px red bold">else</span>')
+    _.gsub!(/if /,
+      '<span class="BG_Black pad1px red bold">if </span>')
+    _.gsub!(/elsif/,
+      '<span class="BG_Black pad1px red bold">elsif</span>')
+    _.gsub!(/__FILE__/,
+      '<span class="BG_Black pad1px pink bold">__FILE__</span>')
+    _.gsub!(/\$PROGRAM_NAME/,
+      '<span class="BG_Black pad1px lightgreen bold">$PROGRAM_NAME</span>')
+    _.gsub!(/class (\w+) </,'<span class="BG_Black pad1px yel bold">class</span> \\1 <')
+    _.gsub!(/super\(\)/,'<span class="BG_Black pad1px cyan bold">super()</span>')
+    _.gsub!(/#!\/System\/Executables\/ruby -w/,'<span class="BG_Black pad1px green bold">#!/System/Executables/ruby -w</span>')
+    _.gsub!(/def (.*)/,
+      '<span class="BG_Black pad1px orange bold">def </span><span class="BG_Black BO pad1px lightblue">\1</span>')
+    _.gsub!(/do/,
+      '<span class="BG_Black pad1px orange bold">do</span>')
+    return _
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.use_this_local_port_or_a_later_port
+  #
+  # This method can be used to scan for an open local port.
+  #
+  # It was necessary because Sinatra may often be already running
+  # on a localhost port.
+  # ========================================================================= #
+  def self.use_this_local_port_or_a_later_port(i = '4567')
+    begin
+      require 'roebe/toplevel_methods/open_ports.rb'
+      if Roebe.is_this_port_open?(i)
+        return i
+      else
+        # else find a fitting open port in the next 50
+        # ports.
+        upper_range = i.to_i + 50
+        i.to_i.upto(upper_range) {|try_this_port|
+          if Roebe.is_this_port_open?(try_this_port)
+            return try_this_port
+          # else # else we must continue.
+          #  return nil
+          end
+        }
+      end
+    rescue LoadError
+    end
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.try_to_open_this_URL_via_the_browser
+  #
+  # This method simplifies working with Sinatra. The main use case for
+  # this method is to show the localhost-URL, and then open this in
+  # the browser directly, via the "open" gem.
+  #
+  # The second argument specifies which port is to be used.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.try_to_open_this_URL_via_the_browser(target, USE_THIS_PORT)
+  #
+  # ========================================================================= #
+  def self.try_to_open_this_URL_via_the_browser(
+      target,
+      use_this_port = '4567'
+    )
+    begin
+      require 'open' # Pull in the gem called "open" here.
+      if use_this_port # Avoid nil and false values.
+        target = "http://localhost:#{use_this_port}/"
+        if block_given? and (yield == :be_quiet)
+        else
+          puts ::Colours.sfancy(target)
+        end
+        Thread.new {
+          Open.in_browser(target) {{ delay: '1.0 seconds' }}
+        }
+      end
+    rescue LoadError => error
+      pp error
+    end
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.draw_circle
+  #
+  # This method will draw a circle, via CSS.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.draw_circle(width: 200, height: 500, background_color: :steelblue, border_radius: '30%')
+  #
+  # ========================================================================= #
+  def self.draw_circle(
+      hash = {
+        width:            200, # in px
+        height:           200, # in px
+        background_color: :crimson,
+        border_radius:    '50%'
+      },
+      counter = @internal_hash[:counter_for_the_dynamic_circle]
+    )
+    _ = "\n".dup
+    _ << "<style>\n"
+    _ << "div.dynamic_circle#{counter} {\n"
+    _ << "  width: #{hash[:width]}px;\n"
+    _ << "  height: #{hash[:height]}px;\n"
+    _ << "  background: #{hash[:background_color]};\n"
+    _ << "  border-radius: #{hash[:border_radius]};\n"
+    _ << "}\n"
+    _ << "</style>\n"
+    _ << "<div class=\"dynamic_circle#{counter}\"></div>"
+    increment_draw_circle_counter
+    return _
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.increment_draw_circle_counter
+  # ========================================================================= #
+  def self.increment_draw_circle_counter
+    @internal_hash[:counter_for_the_dynamic_circle] += 1
+  end
+
+  # ========================================================================= #
+  # === Cyberweb.is_a_video_file?
+  #
+  # This method can be used to determine whether xyz is a video file or
+  # whether it is not.
+  #
+  # Usage example:
+  #
+  #   Cyberweb.is_a_video_file?('/tmp/foobar.avi')
+  #
+  # ========================================================================= #
+  def self.is_a_video_file?(
+      this_file = 'foobar.mp4'
+    )
+    array = %w( .avi .mp4 .mkv .webm )
+    array.include? File.extname(this_file)
+  end
+
   # ========================================================================= #
   # === Cyberweb.show_admin_icons
   #
   # Show all admin icons through this method.
   # ========================================================================= #
-  def self.show_admin_icons
+  def self.show_admin_icons(
+      array = ARRAY_LISTING_ALL_PROJECT_IMAGES
+    )
     _ = ''.dup
-    ARRAY_LISTING_ALL_PROJECT_IMAGES.each { |entry|
+    array.each { |entry|
       use_this_id = File.basename(entry.to_s).to_s.downcase.delete('.')
       _ << string_s2(entry, '','','s1px marl0_7em black')+
            sg(
@@ -80,6 +483,13 @@ module Cyberweb
     return _
   end
 
+  # ========================================================================= #
+  # === Cyberweb.return_pretty_stars
+  # ========================================================================= #
+  def self.return_pretty_stars
+    return '<hr class="hr_stars">'
+  end
+
   # ========================================================================= #
   # === show_ruby_file
   #
@@ -140,10 +550,10 @@ module Cyberweb
   # This method will generate a <select><option> listing, a drop-down
   # interface. The input to this method must be an Array.
   # ========================================================================= #
-  def self.dropdown_box(input)
-    if input.is_a? Array # Ok.
+  def self.dropdown_box(i)
+    if i.is_a? Array # Ok.
       _ = '<select>'.dup
-      input.each {|line|
+      i.each {|line|
         _ << string_option(line)
       }
       _ << string_close(:select)
@@ -165,41 +575,6 @@ module Cyberweb
     return _
   end
 
-  # ========================================================================= #
-  # === Cyberweb.colourize_ruby_code                              (ruby tag)
-  #
-  # Use this to colourize ruby code. Be careful when using this though
-  # and only use it when you (a) need it and (b) when you have ruby
-  # code in question.
-  # ========================================================================= #
-  def self.colourize_ruby_code(_)
-    _ = _.dup
-    _.gsub!(/class /,
-      '<span class="BG_Black pad1px lightgreen bold">class </span>')
-    _.gsub!(/require/,
-      '<span class="pad1px red FI bold">require</span>')
-    _.gsub!(/end$/,
-      '<span class="BG_Black pad1px red bold">end</span>')
-    _.gsub!(/else/,
-      '<span class="BG_Black pad1px red bold">else</span>')
-    _.gsub!(/if /,
-      '<span class="BG_Black pad1px red bold">if </span>')
-    _.gsub!(/elsif/,
-      '<span class="BG_Black pad1px red bold">elsif</span>')
-    _.gsub!(/__FILE__/,
-      '<span class="BG_Black pad1px pink bold">__FILE__</span>')
-    _.gsub!(/\$PROGRAM_NAME/,
-      '<span class="BG_Black pad1px lightgreen bold">$PROGRAM_NAME</span>')
-    _.gsub!(/class (\w+) </,'<span class="BG_Black pad1px yel bold">class</span> \\1 <')
-    _.gsub!(/super\(\)/,'<span class="BG_Black pad1px cyan bold">super()</span>')
-    _.gsub!(/#!\/System\/Executables\/ruby -w/,'<span class="BG_Black pad1px green bold">#!/System/Executables/ruby -w</span>')
-    _.gsub!(/def (.*)/,
-      '<span class="BG_Black pad1px orange bold">def </span><span class="BG_Black BO pad1px lightblue">\1</span>')
-    _.gsub!(/do/,
-      '<span class="BG_Black pad1px orange bold">do</span>')
-    return _
-  end
-
   # ========================================================================= #
   # === @css_object
   #
@@ -389,9 +764,9 @@ module Cyberweb
   #   bl $CYBERWEB/yaml/js_files_to_load.yml
   #
   # ========================================================================= #
-  if File.exist? PROJECT_YAML_DIRECTORY+'js_files_to_load.yml' # MAIN_DIR is defined in web_requires.rb
+  if File.exist? ::Cyberweb.project_yaml_directory?+'js_files_to_load.yml' # MAIN_DIR is defined in web_requires.rb
     ARRAY_DEFAULT_JAVASCRIPT_LIBRARIES = YAML.load_file(
-      "#{PROJECT_YAML_DIRECTORY}js_files_to_load.yml" # bl $WEB_FOUNDATION/yaml/js_files_to_load.yml
+      "#{::Cyberweb.project_yaml_directory?}js_files_to_load.yml" # bl $WEB_FOUNDATION/yaml/js_files_to_load.yml
     )
   else
     ARRAY_DEFAULT_JAVASCRIPT_LIBRARIES = []
@@ -646,6 +1021,46 @@ module Cyberweb
     ctdctr
   end
 
+  # ========================================================================= #
+  # === Cyberweb.insert_target_blank_onto_this
+  #
+  # This is an ad-hoc method - I needed to add the substring
+  # 'target="_blank"' to a HTML href hyperlink, a <a> tag. Note
+  # that input to this ad-hoc method is assumed to be a bit
+  # dirty sometimes, meaning we may find more than just the
+  # <a> tag used.
+  #
+  # Usage example and expected input and output:
+  #
+  #   x = '<a href="https://www.youtube.com/watch?v=WxhjElaBRhE" id="our_id" onclick="change_the_colour_to()">'
+  #   Cyberweb.insert_target_blank_onto_this(x)
+  #   puts x
+  #
+  # ========================================================================= #
+  def self.insert_target_blank_onto_this(i)
+    add_this = ' target="_blank"' # This is the String that we will add.
+    original_input = i.dup # This is our original input as-is.
+    work_on_a_copy = i.dup
+    if original_input.include?('>') # In this case we have dirty input.
+      splitted = original_input.split(/>/, 2)
+      first_element = splitted.first
+      # ===================================================================== #
+      # Find the last position of the ' ' character.
+      # ===================================================================== #
+      last_index = first_element.rindex(' ')
+      first_element[last_index, 0] = add_this
+      work_on_a_copy = splitted.join('>')
+    else
+      # ===================================================================== #
+      # Find the last position of the ' ' character.
+      # ===================================================================== #
+      last_index = original_input.rindex(' ')
+      work_on_a_copy[last_index, 0] = add_this
+    end
+    i.replace(work_on_a_copy)
+    return work_on_a_copy # And return it, just in case.
+  end
+
   # ========================================================================= #
   # === ibr
   #
@@ -938,15 +1353,6 @@ module Cyberweb
   end; alias save_what    websave_what_to # === save_what
        alias save_what_to websave_what_to # === save_what_to
 
-  # ========================================================================= #
-  # === send_email
-  #
-  # Use this method to send an email.
-  # ========================================================================= #
-  def send_email
-    w.mail.deliver
-  end
-
   # ========================================================================= #
   # === right
   # ========================================================================= #
@@ -1330,32 +1736,6 @@ module Cyberweb
     Cyberweb.project_base_directory?+'javascript_code/'
   end
 
-  # ========================================================================= #
-  # === Cyberweb.try_to_open_this_URL_via_the_browser
-  #
-  # Usage example:
-  #
-  #   Cyberweb.try_to_open_this_URL_via_the_browser(target, USE_THIS_PORT)
-  #
-  # ========================================================================= #
-  def self.try_to_open_this_URL_via_the_browser(
-      target, use_this_port = '4567'
-    )
-    begin
-      require 'open'
-      target = "http://localhost:#{use_this_port}/"
-      if block_given? and (yield == :be_quiet)
-      else
-        puts ::Colours.sfancy(target)
-      end
-      Thread.new {
-        Open.in_browser(target) {{ delay: '1.0 seconds' }}
-      }
-    rescue LoadError => error
-      pp error
-    end
-  end
-
   # ========================================================================= #
   # === Cyberweb.window                                          (window tag)
   #
@@ -1391,6 +1771,78 @@ module Cyberweb
     return result
   end
 
+  # ========================================================================= #
+  # === Cyberweb.is_an_image_file?
+  # ========================================================================= #
+  def self.is_an_image_file?(i)
+    ARRAY_IMAGES.include?(File.extname(i).delete('.'))
+  end; self.instance_eval { alias is_an_image? is_an_image_file? } # === Cyberweb.is_an_image?
+
+  # ========================================================================= #
+  # === Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag
+  #
+  # The following method is an ad-hoc method - I needed to sanitize a remote
+  # String coming from a .html page that removed all newlines. Ideally this
+  # should be a regex, but for now we just chop away on '>'.
+  #
+  # If a file is given as argument then its content will be read.
+  #
+  # Usage example for a local .html file:
+  #
+  #   x = Cyberweb.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag('/Depot/j/foobar.html')
+  #
+  # ========================================================================= #
+  def self.sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag(
+      i = ARGV
+    )
+    if i.is_a? Array
+      i = i.join(' ').strip
+    end
+    if i and File.file?(i)
+      i = File.read(i) # Add support for existing files here.^
+    end
+    return i.gsub(/>/, ">\n")
+  end; self.instance_eval { alias sanitizer sanitize_this_string_by_adding_a_newline_after_every_closing_HTML_tag } # === Cyberweb.sanitizer
+
+  # ========================================================================= #
+  # === Cyberweb.return_html_code_for_the_javascript_calculator
+  #
+  # This is the method that will return the table that, in turn, shall
+  # simulate a javascript-calculator.
+  # ========================================================================= #
+  def self.return_html_code_for_the_javascript_calculator
+    return '<table id="simple_javascript_calculator" style="border: 1px solid black">
+<tr>
+<td align="center">
+<input type="text" ID="screen_for_the_simple_javascript_calculator" NAME="screen" style="width:95%; font-size: 30px"><br/>
+</td>
+</tr>
+<tr>
+<td>
+<input class="input_for_the_calculator" type="button" NAME="7" VALUE="  7  " onclick="updateTextbox(7)">
+<input class="input_for_the_calculator" type="button" NAME="8" VALUE="  8  " onclick="updateTextbox(8)">
+<input class="input_for_the_calculator" type="button" NAME="9" VALUE="  9  " onclick="updateTextbox(9)">
+<input class="input_for_the_calculator" type="button" NAME="+" VALUE="  +  " onclick="updateTextbox(\'+\')">
+<br>
+<input class="input_for_the_calculator" type="button" NAME="4" VALUE="  4  " onclick="updateTextbox(4)">
+<input class="input_for_the_calculator" type="button" NAME="5" VALUE="  5  " onclick="updateTextbox(5)">
+<input class="input_for_the_calculator" type="button" NAME="6" VALUE="  6  " onclick="updateTextbox(6)">
+<input class="input_for_the_calculator" type="button" NAME="-" VALUE="  -  " onclick="updateTextbox(\'-\')">
+<br>
+<input class="input_for_the_calculator" type="button" NAME="1" VALUE="  1  " onclick="updateTextbox(1)">
+<input class="input_for_the_calculator" type="button" NAME="2" VALUE="  2  " onclick="updateTextbox(2)">
+<input class="input_for_the_calculator" type="button" NAME="3" VALUE="  3  " onclick="updateTextbox(3)">
+<input class="input_for_the_calculator" type="button" NAME="*" VALUE="  x  " onclick="updateTextbox(\'*\')">
+<br>
+<input class="input_for_the_calculator" type="button" NAME="c" VALUE="  c  " onclick="reset();">
+<input class="input_for_the_calculator" type="button" NAME="0" VALUE="  0  " onclick="updateTextbox(0)">
+<input class="input_for_the_calculator" type="button" NAME="=" VALUE="  =  " onclick="result();">
+<input class="input_for_the_calculator" type="button" NAME="/" VALUE="  /  " onclick="updateTextbox(\'/\')">
+</td>
+</tr>
+</table>'
+  end
+
 end
 
 if __FILE__ == $PROGRAM_NAME